for the reference: Check this:
http://jsfiddle.net/blackvibes/mVYwd/
I'm creating a website for mobile (it's pretty sure not the best way to do it.. but anyway) I'm using percentages all the way, since it should be relatively equal in size on any mobile (portrait) screen.
I've tried numberous things, such as:
#header img {
vertical-align:middle;
padding-top: auto;
padding-bottom: auto;
margin-top: auto;
margin-bottom: auto;
}
But I still can't get it working.
The only thing that will be in that div is that single image, which presents the school logo.
Thanks in advance!
Use your image as the background of your #header id:
#header img {
background:url(your_image.jpg) center center no-repeat;
}
remove width and height from img tag and
#header{text-align:center;}
Related
I have an <img> that shows a remote image.
I want it to fallback to another local image, in the case where the remote one is not reachable.
<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico">
.cc_image {
width: 256px;
height: 256px;
}
.cc_image.fallback {
/* this URL here is theoretically a local one (always reachable) */
background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}
It works so that when the src image is not found then the background image will be shown.
The drawbacks are:
it will always load the background image (additional HTTP request)
it shows a little not-found-icon (a question mark on Safari) at the place of te original image, that is displayed above the background-image (not a big issue, but I'd like to get rid of it)
How could I solve these issues?
Or: are there other technics to achieve the same result?
I found this question but the given solutions rely on Javascript or on <object> (that seems to not work on Chrome). I would like a pure CSS/HTML solution, without Javascript if possible.
I know about the multiple background-image but am not sure whether it is a good option (browser support? and will it fallback with an unreachable image?).
Or I was thinking about embedding a SVG image as data-uri.
Suggestions for the most flexible (and compatible) method?
Unfortunately, you can't achieve both without Javascript or object tag.
You could do this to avoid the missing image icon:
Place your image in a container (it might already be in one).
Make the container have the same width and height as the image.
Set the fallback image as the background image of the container.
Set the remote image as the background image of your img tag.
Load an 1x1 pixel transparent png as the src of your image (see code for how that can be done without an extra HTTP request).
Code:
HTML
<!-- you could use any other tag, such as span or a instead of div, see css below -->
<div class="cc_image_container fallback">
<img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>
</div>
CSS
.fallback {
background-image: url(*fallback image here*);
display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
min-width: specify a minimum width (could be the width of the fallback image) px;
min-height: specify a minimum height (could be the height of the fallback image) px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
.cc_image {
min-width: same as container px;
min-height: same as container px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
min-width and max-width make sure that the background images remain visible.
background-position makes sure that the central part of the images remains visible and is a graceful degradation for older browsers
background-size resizes the background image to fill the element background. The cover value means that the image will be resized so it will completely cover the element (some of the outer edges of the image may be cropped)
The base64 data in the img src tag is a transparent 1px png.
This will have an additional benefit that regular users and some bots may not be able to save your images (a rudimentary image protection)
The only drawback is, that you will still have one extra HTTP request for the fallback image.
I have found a solution on Codepen, which I would like to share with you:
https://codepen.io/anon/pen/Eqgyyo
I prefer this solution, because it works with real image tags, not background images.
body {
color: #2c3e50;
font-family: 'verdana';
line-height: 1.35em;
padding: 30px;
}
h1 {
margin-bottom: 40px;
}
ul {
list-style: none;
padding: 0;
}
* {
box-sizing: border-box;
}
img {
color: #95a5a6;
font-size: 12px;
min-height: 50px;
position: relative;
}
img:before {
background: #f1f1f1;
border: 1px solid #ccc;
border-radius: 3px;
content: '\1F517' ' broken image of 'attr(alt);
display: block;
left: 0;
padding: 10px;
position: absolute;
top: -10px;
width: 100%;
}
<h1>Broken image fallback CSS</h1>
<img src="no-image-here" alt="Cats with synthesizers in the space " />
<br /><br />
<ul>
<li>✓ Firefox</li>
<li>✓ Chrome</li>
<li>✓ Opera</li>
<li>✗ Safari (desktop, mobile)</li>
<li>✗ iOS webview</li>
</ul>
I need to make CSS3's background-size properly work in IE8. There are a lot of javascript libraries out there but they extend the options "cover" and "contain" rather than a px value. As I'm using an image sprite I need to set the background size in pixels.
Here is a demo of my code. The sprite image is 600px 400px but ive set the background size to be 300px x 200px so that is looks crisp on high density displays.
<a class="one">Link one</a>
<a class="two">Link two</a>
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
background-size: 300px 200px;
} a.one {
background-position: 0 0;
}
a.two {
background-position: 0 -56px;
}
http://jsfiddle.net/rr2obdss/4/
Can I extend support to IE8 without having to create and maintain a 2nd image sprite?
Depending on the specific case, which you don't really explain in much detail, a workaround with pseudo elements may work?
Just add a pseudo element of the specified size and have it have the sprite as background?
With the right combination of position absolute/relative and z-index this could work.
If you provide more information of what exactly you are trying to achieve I will be able to provide better help.
Edit:
Okay, so I got a solution now. Kind of as expected: looks quite dirty.
But that's what you get when you want to do fancy stuff in IE8 :-P
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
position: relative;
}
a:before {
content: "";
background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
zoom: .5;
text-indent: 0;
overflow: hidden;
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
a.one:before {
background-position: 0 0;
}
a.two:before {
background-position: 0 -112px;
}
The downside of this is, that you would have to calculate the zoom factor instead of just writing down the dimensions you want to have. Also background-position would then be in relation to the full-size background.
Is anything unclear with what I am doing in above code?
The only thing you can do is to :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale')";
But this can cause issues if you use sprite image.
According to caniuse.com, this polyfill may help.
Hope this helps...
-- Lance
For my website this is what I am using for the image with regards to responsive design:
.logo {
max-width: 100%;
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
}
The image scales properly width wise but the image's height is too big. In these kinds of situations what can one do to make the image scale properly? If I remove height auto and assign 70px the image looks good when viewed in full version but as you begin to shrink the size of the browser the image looks like it's going inwards.
HOw can i fix this?
try this:
{
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
for this wrapp a div around img and apply the height you want and overflow hide it
.imgwrapp {width:100%;height:70px;overflow:hidden;float:left}
So given the css you have there, the ratio of width to height of the image is what's giving you problems. If you don't like the height of the image when the browser is wide, then you should probably get a different image/crop it. When you set the height to 70px what you're doing is forcing the image into a box that it doesn't fit in, so the image will look funny as it's being scaled weird.
But alas there is another option. here is a jsfiddle that shows only the amount of the image that fits within my first n pixels (in your case 70) so that way it will kind of slide out of view. Check the css here :
.header {
width: 100%;
height: 100px;
overflow:hidden;
}
.everythingelse {
width: 100%;
height: 200px;
}
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.
When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?
The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).
img {
object-fit: cover;
}
97% of browser sessions support this as of 2022 May. — Can I use?
If you want to anchor the image to the top left corner instead of the center, add:
img {
object-position: 0 0;
}
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Then in the above DIV you can play with CSS
width/height
background-position
to create different crop effects.
You can use the CSS clip property:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.
See:
https://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.cssplay.co.uk/menu/clip_gallery
Use this :
http://www.w3schools.com/css/pr_background-position.asp
background-position: 5px 5px;
and then set the height and width of the div
height: 55px;
width: 55px;
Show it as a background image