Html 使用 CSS 按比例调整图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/787839/
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
Resize image proportionally with CSS?
提问by codingbear
Is there a way to resize (scale down) images proportionally using ONLY CSS?
有没有办法只使用 CSS 按比例调整（缩小）图像的大小？
I'm doing the JavaScript way, but just trying to see if this is possible with CSS.
我正在使用 JavaScript 的方式，但只是想看看这是否可以用 CSS 实现。
回答by Mkk
To resize the image proportionally using CSS:
要使用 CSS 按比例调整图像大小：
img.resize {
width:540px; /* you can use % */
height: auto;
}
回答by Cherif
Control size and maintain proportion :
控制大小和保持比例：
#your-img {
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
}
回答by lenooh
If it's a background image, use background-size:contain.
如果是背景图片，请使用 background-size:contain。
Example css:
示例CSS：
#your-div {
background: url('image.jpg') no-repeat;
background-size:contain;
}
回答by orome
Try
尝试
transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
回答by andreszs
Notice that width:50%will resize it to 50% of the available spacefor the image, while max-width:50%will resize the image to 50% of its natural size. This is very important to take into account when using this rules for mobile web design, so for mobile web design max-widthshould always be used.
请注意，这width:50%会将其大小调整为图像可用空间的 50%，同时max-width:50%将图像大小调整为其自然大小的 50%。将此规则用于移动网页设计时要考虑到这一点非常重要，因此max-width应始终使用移动网页设计。
回答by Prasanth K C
To scale an image by keeping its aspect ratio
通过保持纵横比缩放图像
Try this,
尝试这个，
img {
max-width:100%;
height:auto;
}
回答by Andrii Bogachenko
You can use object-fitproperty:
您可以使用object-fit属性：
.my-image {
width: 100px;
height: 100px;
object-fit: contain;
}
This will fit image, without changing the proportionally.
这将适合图像，而不会按比例改变。
回答by PetrV
Revisited in 2015:
2015 年回顾：
<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">
I've revisited it as all common browsers now have working auto suggested by Cherif above, so that works even better as you don't need to know if image is wider than taller.
我已经重新审视了它，因为所有常见的浏览器现在都有上面 Cherif 建议的自动工作，因此效果更好，因为您不需要知道图像是否宽于高。
older version: If you are limited by box of 120x100 for example you can do
旧版本：例如，如果您受到 120x100 盒的限制，您可以这样做
<img src="http://image.url" height="100" style="max-width: 120px">
回答by Shawn
The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.
css 属性 max-width 和 max-height 效果很好，但 IE6 不支持，我相信 IE7。您可能希望在高度/宽度上使用它，这样您就不会意外放大图像。您只想按比例限制最大高度/宽度。
回答by Adrien
<img style="width: 50%;" src="..." />
worked just fine for me ... Or am I missing something?
对我来说工作得很好......或者我错过了什么？
Edit:But see Shawn's caveat about accidentally upsizing.
编辑：但请参阅肖恩关于意外扩大规模的警告。
