如何使用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標記保持寬高比

回答

相關問題