已調整大小的圖像在Firefox上閃爍

我一直在使用它的CSS像這樣調整：

img { 
    display: block; 
    max-width: 50px; 
    max-height: 50px; 
}

但它顯示，當它不斷閃爍。

這隻發生在Firefox。 Chrome，IE和Safari都顯示正常。爲什麼是這樣？

來源

2014-10-29 proPhet

您是否嘗試過使用寬度和高度代替最大寬度和最大高度？ – 2014-10-29 08:13:12

這是因爲你正在將大圖調整到非常小的空間。通過PHP或Photoshop等一些桌面工具更好地調整圖像大小 – Justinas 2014-10-29 08:13:22

您使用的是Firefox版本？嘗試將Firefox更新到最新版本並再次測試... – 2014-10-29 08:13:56

首先它是一個壞主意來調整圖像大小。當你需要一張50x50的圖片時，爲什麼要有一張400x300的圖片。你可以通過讓他下載一個30Kb的文件來浪費用戶，當他用4Kb的時候可以下載。

但是，你想要的是縮放圖像。 CSS3有一個新的屬性ri。

試試這個

img.ri { max-width: 90%; }

您可以使用媒體查詢與此相伴。如果你想響應縮放圖像http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design：

@media screen and (orientation: portrait) { 
    img.ri { max-width: 90% } 
} 

@media screen and (orientation: landscape) { 
    img.ri { max-height: 90% } 
}

現在，你不想失去你的長寬比，所以儘量CSS屬性

resize: none|both|horizontal|vertical|initial|inherit; /* any one of the options IE not supported*/

看看這個。

來源

2014-10-29 08:29:09 argentum47

已調整大小的圖像在Firefox上閃爍

回答

相關問題