Can you do this? I'm having users upload images into a container that is width:100%, but I don't want the images to be larger than their original size. Many thanks!
-
3The image should naturally be the size that it is. Are you setting the image to width:100 also?– Theodore EnderbyJun 13, 2014 at 4:30
-
3No. You cannot. There is no way for CSS to know the actual size of a random image. You'd need javascript to detect the image size and scale the image.– Koala YeungJun 13, 2014 at 4:32
2 Answers
Just don't set the width
of the image, only the max-width
.
img {max-width:100%; height:auto}
(height:auto
is not really necessary, since auto
is the default, but I put it in there as a reminder to myself that I want the image to have its natural proportions.)
This snippet has two boxes, one that is smaller than the image and one that is larger. As you can see, the image in the smaller box gets scaled down, while the one in the bigger box has its normal size.
div {border:2px outset green; margin:6px 0}
.box1 {width:100px; height:70px;}
.box2 {width:200px; height:100px;}
img {max-width:100%; height:auto}
<div class="box1">
<img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>
<div class="box2">
<img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>
-
10If someone is wondering (like me) how to override an inherited width setting, just add width:auto in the new class that you will assign to the image. Mar 29, 2016 at 15:10
-
8This sets the max width to the size of the container, rather than to the original (or natural) size of the image.– TomMar 26, 2020 at 22:32
-
3That’s not how I read the OPs requirements. He’s asking for it to not exceed the original / natural dimensions, rather than to not exceed the container.– TomMar 28, 2020 at 11:00
-
2@MrLister developer.mozilla.org/en-US/docs/Web/CSS/max-width max-width as a percentage defines the max-width as a percentage of the containing block's width– TomApr 1, 2020 at 18:00
-
1What is working here is the absence of setting a width, which typically means an image sizes itself according to native size. What max-width does is set a limit how big the display size can be. At least this is what happens in modern browsers in 2020, but I think this was commonly the case in 2014 as well. I think Mr Lister said as much already, just clarifying,– MiBDec 1, 2020 at 19:20
You can set the max width of the image in a style tag on the image itself. Then in the style sheet set the display type to "block", the width to whatever percentage of the container you want, and the height to auto. Then add margin: 0px auto to that and it should center perfectly and will never be larger that it's original size.
If these are user-uploaded images and you are using PHP for example, find the image width by using getImageSize() and add the style tag programmatically to the image.