使用像素和百分比约束的 HTML 自动图像大小调整
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8895265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML automatic image resize using pixel and percent constraints
提问by asalamon74
How can I add an image to an HTML page using the following constraints:
如何使用以下约束将图像添加到 HTML 页面：
- 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.
- 不允许放大（如果图片宽度为 400 像素，我不想将其调整为 600）。
- 如果包含元素小于图像，则应缩小图像。
- 保持长宽比例。
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.
例如我有一个图像（400x300）。如果包含元素的宽度为 600 像素，我想以 400x300 显示图像。如果包含元素的宽度为 200 像素（例如它是移动浏览器），我想以 200x150 显示图像。
I'm looking for a pure CSS solution (if it's possible) without hard wiring the image size.
我正在寻找一个纯 CSS 解决方案（如果可能的话），而无需硬连接图像大小。
回答by asalamon74
Using the max-width property twice works correctly:
使用 max-width 属性两次可以正常工作：
<div style="max-width: 400px" >
<img src="image.jpg" style="max-width:100%;" />
</div>
回答by AdamY
You should use the max-width property:
您应该使用 max-width 属性：
<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
这会将您的图像宽度限制为父 div 元素，必要时缩小图像。它不会丢失其纵横比或放大图像。所有最新浏览器都支持 max-width，但 IE6 不支持
回答by David Morris
It does not downscale the image. – asalamon74
它不会缩小图像。– 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:
我将 AdamY 的代码插入到我的 HTML 中，它确实缩小了图像的尺寸。这是我得到的一些图像尺寸示例：800w x 626h、962x640、895x640。对于这些和其他人，它正确地缩放了它们 - 这意味着在将“style="max-width:100%;"”添加到 img 标签后，图像适合我的容器 (#photo-container) 的宽度，并且规模。并不是说它会在你的代码中工作，但它对我有用。这是我的相关 CSS/HTML 代码：
CSS:
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:
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:
这些图像实际上是使用 javascript 放置的。对于这个主题，我的 javascript 代码中的选择过程有点冗长，但本质上它等同于：
photo-display.src=myimage;
I have not tried it with a photo with a width that is less than 800.
宽度小于800的照片我没试过。
回答by Just Johnny
It should be noted that your IMG tag needs to have the Width & Height property removed, otherwise it will not scale properly.
需要注意的是，您的 IMG 标签需要移除 Width & Height 属性，否则将无法正确缩放。
回答by K.Alex
By tag < img > without using div boxes etc.
通过标签 <img> 不使用 div 框等。
img {
width: auto;
height: auto;
max-width: 100%;
}
