如何使用HTML IMG标记来维护宽高比 [英] How to maintain aspect ratio using HTML IMG tag

问题描述

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

I am using img tag of HTML to show photo in our application. I have set its both height and width attribute to 64. My requirement is I need to show any size(e.g. 256X256, 1024X768, 500X400, 205X246 etc.) of photo in 64X64 size. But, by setting the height and width of img tag to 64 is not maintaining the aspect ratio. This way. it is not showing clear photo. I need to resolve it quickly. Please help me for this.

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

For your reference my exact code is:

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

提前感谢

推荐答案

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

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

这篇关于如何使用HTML IMG标记来维护宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！