比例適合圖像的DIV中 - 圖像不應該被裁剪

我讀了一堆關於一個div內的圖像固定的職位，但沒有解決我的問題尚未：比例適合圖像的DIV中 - 圖像不應該被裁剪

我有一個響應網頁設計，設置容器div的高度到瀏覽器窗口高度，然後將圖像加載到flexslider中。大多數圖像將比瀏覽器視口大。

我的問題是，我可以使照片適合寬度正確，但圖像從未正確調整高度。請參閱http://stineheilmann.dk/portfolio/shoes/（圖片3）

如何確保圖片始終保持在包含div的同時保持縱橫比？

來源

2012-11-23 Christoffer Hauthorn Boisen

'IMG {寬度：100％;身高：自動; }'應該可以工作 – Andy

好吧，至少在所有瀏覽器中都不是這樣，因爲這不能解決我的裁剪問題。 –

是否有瀏覽器限制？你在找什麼類似this demo？

CSS

.frame{width:300px;height:300px;padding: 2px; border:1px solid #ccc;margin:5px;} 
.frame img{max-width:100%;max-height:100%;}

HTML會是這樣的

<div class="frame"> 
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/> 
</div> 
<div class="frame"> 
    <img src="http://farm8.staticflickr.com/7251/8165766003_0e57a95b55.jpg"/> 
</div>

更新：我有不同的縱橫比的三幅圖像，即適合在div更新的演示沒有得到偏斜或溢了出來的div。

來源

2012-11-23 11:11:03 ch4nd4n

我看不到您的更新。因此，爲了這個工作，包含div需要有固定的寬度和高度？如果有必要，我只需使用jQuery編輯高度和寬度。 –

它適用於Chrome，但不是所有其他瀏覽器。我更新了網站上的代碼。 –

僅此CSS添加到以下選擇：

.flexslider .slides img { 
    height:100%; 
    .... 
}

來源

2012-11-23 11:11:40

對不起，但這在FF中不起作用，並且在某些條件下會扭曲圖像的比例。 –

比例適合圖像的DIV中 - 圖像不應該被裁剪

回答

相關問題