如何使用 HTML IMG 标签保持纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12912048/
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
How to maintain aspect ratio using HTML IMG tag
提问by sunil kumar
I am using an img tag of HTML to show a photo in our application. I have set both its height and width attribute to 64. I need to show any image resolution (e.g. 256x256, 1024x768, 500x400, 205x246, etc.) as 64x64. But by setting the height and width attributes of an img tag to 64, it's not maintaining the aspect ratio, so the image looks distorted.
我正在使用 HTML 的 img 标签在我们的应用程序中显示照片。我已将其高度和宽度属性设置为 64。我需要将任何图像分辨率（例如 256x256、1024x768、500x400、205x246 等）显示为 64x64。但是通过将 img 标签的高度和宽度属性设置为 64，它不会保持纵横比，因此图像看起来失真。
For your reference my exact code is:
供您参考，我的确切代码是：
<img src="Runtime Path to photo" border="1" height="64" width="64">
回答by Turnip
Don't set height AND width. Use one or the other and the correct aspect ratio will be maintained.
不要设置高度和宽度。使用其中之一，将保持正确的纵横比。
.widthSet {
max-width: 64px;
}
.heightSet {
max-height: 64px;
}<img src="http://placehold.it/200x250" />
<img src="http://placehold.it/200x250" width="64" />
<img src="http://placehold.it/200x250" height="64" />
<img src="http://placehold.it/200x250" class="widthSet" />
<img src="http://placehold.it/200x250" class="heightSet" />回答by AKHIL P
here is the sample one
这是示例之一
div{
width: 200px;
height:200px;
border:solid
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}<div>
<img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>回答by Ilya Streltsyn
Set widthand heightof the images to auto, but limit both max-widthand max-height:
将图像的width和设置height为auto，但同时限制max-width和max-height：
img {
max-width:64px;
max-height:64px;
width:auto;
height:auto;
}
If you want to display images of arbitrary size in the 64x64px "frames", you can use inline-block wrappers and positioning for them, like in this fiddle.
如果您想在 64x64 像素“框架”中显示任意大小的图像，您可以使用内联块包装器并为它们定位，就像在这个 fiddle 中一样。
回答by Lucio Fonseca
<img src="Runtime Path to photo"
style="border: 1px solid #000; max-width:64px; max-height:64px;">
回答by Anonymous Coward
None of the methods listed scale the image to the largest possible size that fits in a box while retaining the desired aspect ratio.
列出的方法都没有将图像缩放到适合框的最大可能尺寸，同时保持所需的纵横比。
This cannot be done with the IMG tag (at least not without a bit of JavaScript), but it can be done as follows:
这不能通过 IMG 标签完成（至少在没有一点 JavaScript 的情况下不能），但可以按如下方式完成：
<div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
回答by Konstantin Dinev
Wrap the image in a divwith dimensions 64x64 and set width: inheritto the image:
将图像包裹在div尺寸为 64x64 的 a 中并设置width: inherit为图像：
<div style="width: 64px; height: 64px;">
<img src="Runtime path" style="width: inherit" />
</div>
回答by Ankit Kumar Verma
Use object-fit: containattribute in in css of html img.
object-fit: contain在 html 的 css 中使用属性img。
回答by Sahan De Silva
Why don't you use a separate CSS file to maintain the height and the width of the image you want to display? In that way, you can provide the width and height necessarily.
为什么不使用单独的 CSS 文件来维护要显示的图像的高度和宽度？这样，您就可以提供必要的宽度和高度。
eg:
例如：
image {
width: 64px;
height: 64px;
}
回答by Nick friesen
Try this:
尝试这个：
<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">
Adding object-fit="cover" will force the image to take up the space without losing the aspect ratio.
添加 object-fit="cover" 将强制图像占用空间而不会丢失纵横比。
