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

我正在使用HTML的img标记在我们的应用程序中显示照片。我已将其高度和宽度属性设置为64.我需要将任何图像分辨率（例如256x256,1024x768,500x400,205x246等）显示为64x64。但是，通过将img标签的高度和宽度属性设置为64，它不会保持高宽比，因此图像看起来失真。如何使用HTML IMG标记保持宽高比

供您参考我确切的代码是：

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

来源

2012-10-16 sunil kumar

可能出现[HTML/IE：适合拉伸图像，保留宽高比的图像]的副本（http：// stac kridflow.com/questions/643500/html-ie-stretch-image-to-fit-preserve-aspect-ratio） –

Chridam，很长一段时间我问这个问题。我已经离开了那个我为这个问题工作的公司。我无法尝试建议的解决方案，因为我正在研究其他优先事项，以便按时完成最后期限。我无法获得进一步发展的机会。 –

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

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

来源

2012-10-16 10:04:30

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

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

来源

2012-10-16 10:06:26 Turnip

小提琴上的图像被破坏。 – theblang

...但如果你想修复高度和宽度呢？ – fatuhoku

-1

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

如：

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

来源

2012-10-16 10:10:49

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

来源

2013-07-29 00:42:19

这是正确的解决方案，因为它继续独立于图像的方向。3rror404的解决方案要求您知道图像是否比高度宽，反之亦然。 – devios1

也将'width'和'height'设置为'auto'。 – Mahmoodvcs

约束高度和宽度的正确解决方案。 –

设置width和图像的height到auto，但同时限制max-width和max-height：

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

Fiddle

如果要在64x64像素“帧”中显示任意大小的图像，可以使用内联块封装和定位，例如in this fiddle。

来源

2013-07-29 01:08:57

你是第二个小提琴的例子对我很好。谢谢！ – Daniel

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

这不能与IMG标记（至少不是没有一些JavaScript）来完成，但是这是可以做到如下：

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

来源

2013-11-29 18:21:48

是的。为''标记使用'style =“background：url（'_'）; background-size：cover width：_px height：_px”'标记。 –

谢谢，@UjjwalSingh。事实上，我们需要“覆盖”而不是“包含”，以尽可能最大化图像尺寸。 '包含'导致“信箱”。 –

这里是样品一个

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>

来源

2015-02-22 11:17:13

不适用于firefox – Sllouyssgort

它现在可以在firefox中使用 –

只需注意那些想要使用此解决方案的人：对象适合性得不到浏览器的很好支持。它完全不支持IE或Edge。资料来源：http：//caniuse.com/#feat=object-fit –

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

回答

相关问题