如何使用HTML IMG标签保持纵横比

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">

7 个解决方案

#1

Don't set height AND width. Use one or the other and the correct aspect ratio will be maintained.

不要设置高度和宽度。使用一个或另一个，将保持正确的纵横比。

.widthSet {
    max-width: 100px;
}

.heightSet {
    max-height: 100px;
}

<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" />

#2

<img src="Runtime Path to photo" style="border: 1px solid #000; max-width:64px; max-height:64px;">

#3

here is the sample one

这是样本1。

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>

#4

Set width and height of the images to auto, but limit both max-width and max-height:

将图像的宽度和高度设置为auto，但同时限制max-width和max-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

Fiddle

小提琴

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.

如果您想在64px的“帧”中显示任意大小的图像，您可以使用内联块包装器并对其进行定位，就像这个小提琴一样。

#5

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>

#6

Wrap the image in a div with dimensions 64x64 and set width: inherit to the image:

将图像封装到一个div中，尺寸为64x64，设置宽度:继承到图像:

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

#7

-1

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;
       }

#1