Firefox的縮放圖像，使其高度是100像素

我將各種尺寸和尺寸的圖像加載到我的網站。 Chrome瀏覽器，Opera和Safari瀏覽器都會拉伸圖片，以免看起來不自然地伸展或偏斜。 Firefox保留原始圖像的寬度並將圖像高度設置爲100px。這會導致50x100,150x100和2000x100圖像。 enter image description here 在左側顯示Chrome，在右側顯示Firefox。我希望所有圖像都精確到100px。Firefox的縮放圖像，使其高度是100像素

圖像類看起來像這樣

img.image-message { 
     padding-bottom: 2px; 
     height: auto; 
     width: auto; 
     max-height: 100px; 
     max-width: 100%; 
    }

僅設置height和width不會改變一件事：在metahill.com

img.image-message { 
     padding-bottom: 2px; 
     height: 100px; 
     width: auto; 
    }

查看活生生的例子。您可以使用此用戶登錄：

Username: test_t 
Password: meta_hill_t

來源

2013-07-30 poitroae

移除最大高度：100px？ – beta0x64

如果你想保持寬高比，你可以將寬度設置爲自動像這樣http://stackoverflow.com/questions/757782/how-to-preserve-aspect-ratio-when-scaling-image-using-one- css-dimension-in-ie6 – wendelbsilva

@ beta0x64我希望所有圖像的高度爲100px。查看chrome的正確截圖。 – poitroae

嗯，我想我已經確定了你的問題在CSS中的根源。它實際上並不是直接的<img>元素的風格，這是什麼使它很難確定。它位於在這個定義中chat.css：

#chat .chat-entry > .chat-entry-message { 
    display:-webkit-box; 
    display:-moz-box; 
    display:-o-box; 
    display:box; 
    padding: 3px; 
    word-wrap: break-word; 
}

你在Firefox中看到的問題涉及display: -moz-box，正如explained by Mozilla，使孩子們（如<img>元素，你遇到麻煩）的風格的元素來增長，以填補他們的父母。定義更改爲類似：

#chat .chat-entry > .chat-entry-message { 
    display: block; 
    padding: 3px; 
    word-wrap: break-word; 
}

將解決這個問題的觀察，雖然我不知道如果display: box所有這些變種在那裏用於其他目的。（所以我不能說這個修補程序是否會影響其他任何內容。）無論如何，希望這是你正在尋找的！如果沒有，讓我知道，我會很樂意嘗試幫助進一步！

來源

2013-07-30 17:28:15 Serlite

設置高度爲100px，而不是最大高度。寬度將自動跟隨高度，除非特別聲明。

來源

2013-07-30 17:09:52

您是否真的在例如螢火蟲？只留下'img.image-message {height：100px; padding-bottom：2px;}'並不能解決問題。 – poitroae

我有一個類似的代碼在我正在進行的項目中，如果答案不同，我會仔細檢查並更新，但我相信這就是我必須要做的 –

我不明白你的代碼和我的代碼之間的區別，但我提供的解決方案適用於我的情況。 –

Firefox的縮放圖像，使其高度是100像素

回答

相關問題