如何使用HTML IMG标记来保持宽高比

我使用HTML的img标签在我们的应用程序中显示照片。 我已经把它的高度和宽度属性设置为64.我的要求是我需要显示任何尺寸（如256X256,1024X768,500X400,205X246等）的照片在64X64的大小。 但是，通过将img标签的高度和宽度设置为64不能保持宽高比。 这条路。 它没有显示清晰的照片。 我需要快速解决它。 请帮我这个。

为了您的参考，我的确切代码是：

<img src="Runtime Path to photo" border="1" height="64" width="64"> 

提前致谢

Answer 1

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

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

Answer 2

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

Answer 3

将图像的width和height设置为auto ，但限制max-width和max-height ：

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

小提琴

如果要在64×64像素的“帧”中显示任意大小的图像，可以使用内联块封装和定位，就像在这个小提琴中一样 。

Answer 4

这里是一个示例

 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> 

Answer 5

所列方法都没有将图像缩放到适合一个盒子的尽可能大的尺寸，同时保持所需的纵横比。

这不能用IMG标签来完成（至less不是没有一点JavaScript），但是可以这样做：

  <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div> 

Answer 6

将图像div在尺寸为64×64的div并设置width: inherit到图像：

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

Answer 7

为什么不使用单独的CSS文件来保持要显示的图像的高度和宽度？ 这样，你可以提供必要的宽度和高度。

例如：

  image { width: 64px; height: 64px; }