在Chrome和Firefox上，CSS比例圖像的行爲不同

我有一個帶有圖像的div。圖像具有不同的大小和方向，如果圖像大小大於圖像，圖像將按比例調整大小（如果圖像小於圖像，圖像應保持原始大小）。我的問題是圖像不能在Firefox中按比例調整大小（圖像不再成比例，如果圖像寬度超過max-width屬性，高度會增加，雖然寬度方面的最大寬度屬性），但看起來不錯在Chrome上。在Chrome和Firefox上，CSS比例圖像的行爲不同

我不確定這是否可以單獨使用CSS修復，但是如果有CSS，只有CSS解決方案纔是首選。

CODE

.frame { 
 
    width: 160px; 
 
    height: 160px; 
 
    border: 10px solid #333; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: hidden; 
 
} 
 
.frame img { 
 
    box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9); 
 
    max-width: 140px; 
 
    max-height: 140px; 
 
}

<div class="frame"> 
 
    <img src="//s3.amazonaws.com/ssiCebu/Confirmit/APAC/2015/May/23991558_LowRateRepricing/cards/1.jpg" /> 
 
</div> 
 
<br><br> 
 
<div class="frame"> 
 
    <img src="//i.bnet.com/blogs/vertical_farm_in_desert_chris_jacobs.jpg" /> 
 
</div>

來源

2015-05-06 KiiroSora09

這裏正在搗鼓你的例子：https://jsfiddle.net/tjmrmLcc/2/

嘗試和編輯下面的CSS規則

.frame img { 
    box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9); 
    width:100% /*Added Rule*/ 
    max-width: 100%; 
    max-height: 140px; 
}

來源

2015-05-06 07:01:57

臨屋儘管我測試了它，並且它在第一個圖像上起作用。但我在面向肖像的圖像上進行了測試，並沒有按比例縮放（我添加了另一個示例圖像）。有沒有辦法使它與縱向圖像兼容？ – KiiroSora09

您新添加的圖像缺失。你能再次檢查路徑嗎？ –

我不確定，第一張圖片下方的圖片在我的結尾處可見。這是使用的路徑：http://i.bnet.com/blogs/vertical_farm_in_desert_chris_jacobs.jpg – KiiroSora09

在Chrome和Firefox上，CSS比例圖像的行爲不同

回答

相關問題