I have a 64px that I would want to scale with browser window I have added max-width 100% but the image stays the same.
Html
<img src="../images/GitHub-Mark-64px.png">
CSS
img{
max-width: 100%;
height: auto;
}
If your image is smaller than the containing DIV, your CSS rule won't make it any bigger. Try to use width instead of max-width:
img{
width: 100%;
height: auto;
}
Addition/Edit after Comments of OP:
You can use any percentage value in this rule, like 60% (or whatever you like), but using width, not max-width (which is only a maximum limit, but not an actual size definition).
But note: It won't really look good if the original image is smaller than displayed and is "blown up".
Try using width instead of max-width in your CSS, width attribute actually sets the width of the img. However, setting it to 100% would actually cover the entire space, so perhaps you should use a lesser percentage accordingly.
Read: CSS Image size, how to fill, not stretch?
If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
width: 100%;
height: 100%
background-size: cover;
Related
On this page, the columns for the video thumbnails don't seem to display consistently (equally) on Chrome. On IE and FF, both column widths are equally displayed.
My global CSS for image have been set to:
img {
height: auto;
max-width: 100%;
}
Altering any values will affect other image rendering. Any ideas?
The issue is that you don't actually set a width, meaning browsers and images can render any way they want, giving unpredictable results as you've seen.
The easiest solution is to just size your columns to a fixed 50% width, like so:
.page-videos .view-video td {
width: 50%;
}
Leave the max-width: 100% in place, it will ensure that even large images fit this 50% perfectly.
Feel free to replace the classes of my sample code, they are simply a best guess at ensuring we only change this one table, but you may know better/more-specific classes for this project.
Removing max-width globally fixes it, or override it with min-width instead. max-width only sets the maximum width permitted, not an actual width
.cboxElement img {
height: auto;
min-width: 100%;
}
I would like to have a CSS class and/or solution where the image is 100% width (with height being auto), but max its own size. Anyway to achieve that or do I need to specify max width image-by-image?
If you set:
width: 100%;
height: auto;
The image will be as bigger as its container is. The ratio between width and height will be kept.
If the image's width is lower then container's width then it will be scaled till it fits the available space. In this case you may want to use:
max-width: 100%;
height: auto;
This should do it:
img {
max-width: 100%;
height: auto;
}
If the window is bigger than the image, the image will not be scaled. If the window is smaller than the image, the image should scale. I noticed you said that it doesn't in your comment to Krasimir's answer. You might want to check and see if there is other CSS that may be changing this behaviour.
I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.
I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).
I've used code shown below but it work only on IE7.
max-width: 100%;
height: auto;
width: auto\9;
I've tried to find any working fix for IE9, but without success.
Your max-width needs to be set to the image size and then width to 100% like so:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.
I stumbled upon this old question while trying to do the exact same thing the OP was trying. I am answering for anyone who may land here. Upon examining http://jsfiddle.net/SAada/2/ mentioned by the OP, I found an interesting solution:
setting
height: auto;
will ensure that the image will not be stretched / scaled up. At the same time, setting
max-width: 100%
will ensure that if the parent element width is less than the image width, the image is scaled down.
Thus, the combination that works for me is:
img {
max-width: 100%;
height: auto;
}
Oh, and after some more search, I discovered that this technique is also used by Bootstrap for responsive images!
Given the following CSS rule,
#block1 {
text-indent: -1000em;
background: transparent url(../images/xxx.png) no-repeat scroll center center;
width: 100px;
height: 50px;
display: inline-block;
}
Assume the image xxx.png is of dimension 100px by 50px. If I need to make this image displayed on #block1 looks smaller, can I simply change the width and height of #block1 or I have to first re-size the image and then change the width and height of the #block1 accordingly.
thank you
You can't in CSS1 and 2, but CSS3 supports the background-size property, which if you set to 100% should give you what you are looking for.
However, you probably should just resize the background image though, unless you have a compelling reason not to :)
CSS can only position the image, not adjust it. If you absolutely needed to resize the image through CSS, you'd have to have the image actually inserted as an img tag, then position it behind the content. It's best just to edit it.
no, the image will just appear to be cropped.
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size