使用像素和百分比约束的 HTML 自动图像大小调整

Question

How can I add an image to an HTML page using the following constraints:

• No upscaling allowed ( if the picture width is 400 pixels I don't want to resize it to 600).
• The image should be downscaled if the containing element is smaller than the image.
• Keep aspect ratio.

For instance I have an image (400x300). If the containing element is 600 pixels wide I'd like to show the image at 400x300. If the containing element is 200 pixels wide ( for instance it's a mobile browser ) I'd like to show the image at 200x150.

I'm looking for a pure CSS solution (if it's possible) without hard wiring the image size.

Answer 1

Using the max-width property twice works correctly:

<div style="max-width: 400px" >
<img src="image.jpg" style="max-width:100%;" />
</div>

Answer 2

You should use the max-width property:

<div style="width:600px">
<img src="images/image.jpg" alt="image" style="max-width:100%;"/>    
</div>

This will constrain your image width to the parent div element, down scaling the image if necessary. It will not lose its aspect ratio or up scale an image. max-width is supported in all up to date browsers but not in IE6

Answer 3

It does not downscale the image. – asalamon74

I plugged AdamY's code into my HTML and it does downscale the image. Here's some samples of the image dimensions I've got: 800w x 626h, 962x640, 895x640. For these and others, it properly scaled them all - meaning after adding 'style="max-width:100%;"' to the img tag, the images fit within the width of my container (#photo-container) and are to scale. Not saying it will work in your code, but it worked for me. Here's my relevant CSS/HTML code:

CSS:

#photo-container {display:block; float:left; width: 800px; 
                    margin-left:5px; margin-top:0px;
                    padding: 10px 10px 10px 10px;
                    background-color:black; color:white;
                    border-bottom-left-radius: 0.5em;
                    border-bottom-right-radius: 0.5em;
                }  

HTML:

    <div id="photo-container">
        <img id="photo-display" src="PlaceHolder" alt="PlaceHolder"  
         style="max-width:100%;">
    </div>

The images are actually placed using javascript. The selection process in my javascript code is a little verbose for this topic, but essentially it equates to:

photo-display.src=myimage;

I have not tried it with a photo with a width that is less than 800.

Answer 4

需要注意的是，您的 IMG 标签需要移除 Width & Height 属性，否则将无法正确缩放。

Answer 5

By tag < img > without using div boxes etc.

img {
width: auto;
height: auto;
max-width: 100%;
}