如何將圖像設置爲背景，而沒有背景圖像屬性？

我有一個塊內的圖像。圖像佔用了我屏幕寬度的100%。父塊的高度爲500px，屏幕寬度也爲100%。我已將overflow: hidden設置爲父塊，因此我只能查看高度上第一個500像素的圖像。如何將圖像設置爲背景，而沒有背景圖像屬性？

現在，我的問題是，當我調整瀏覽器的窗口大小時，我需要將圖像精確地縮放爲背景。由於性能問題（迴流等），我無法使用背景圖像。

我做了這個fiddle。我怎樣才能使第二個圖像的第一個圖像相同的反應？請注意，在我的情況下，圖像具有隨機分辨率。

謝謝你的幫助！如果解決方案需要使用JS/jQuery，那沒關係。

來源

2013-07-11 DrSAS

http://jsfiddle.net/d5xDz/1/？ – rorypicko

你好@RoryPickering！謝謝你的回答，但如果你調整窗口大小，你會看到紅色，第一塊有另一個反應。 – DrSAS

我不完全理解這個問題，爲什麼你的原始jsfiddle不夠好？與背景圖像：封面？爲什麼你必須使用img標籤？ – rorypicko

您需要在您的img上設置min-width和min-height。這將需要與你的包裝成比例。所以對於小提琴例如，具有1024/768圖像尺寸，它是作爲this fiddle shows：

min-width: 333.33px; /* the ratio of height of img to height of wrapper applied to img width */ 
min-height: 250px; /* the height setting of the wrapper */

來源

2013-07-11 15:31:40 ScottS

這對我有用！謝謝！如果你能幫助我兩個，我還有另一個問題！不管怎麼說，還是要謝謝你！ http://stackoverflow.com/questions/17438452/css-set-relative-position-to-an-image-inside-a-block – DrSAS

如何將圖像設置爲背景，而沒有背景圖像屬性？

回答

相關問題