CSS image max-width set to original image size?

Question

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!

Answer 1

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>

Answer 2

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.