使用CSS調整不同大小的圖像

我有一個網頁，它會在不同的時間顯示不同的圖像。有些圖片比網頁寬，有些較高，有些則是兩者。有沒有辦法使用CSS來限制兩者中較大的一個（例如，如果圖像對於屏幕來說太寬，則圖像會降低高度和寬度以保持寬高比相同直到寬度適合。如果身高太高）。使用CSS調整不同大小的圖像

我設法減少原本爲〜1500px x 2000px的圖像，所以它的寬度適合，但滾動條仍然需要看到圖像的底部。伊夫實現這通過具有與以下的容器的div：

#container { 
    min-width: 740px; 
    max-width: 1000px; 
    min-height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
}

，然後設置包含圖像到寬度在div：100％和高度：100％。寬度改變，以適應，但高度doesnt！

編輯：使用下我的答案給出的兩個例子得到：

enter image description here

這是剛剛制約圖像到一定的規模，我可以通過設置寬度做到公正，圖像的高度屬性。我希望它在保持寬高比的情況下最大化屏幕尺寸，因此如果它的寬幅圖像會顯示整個寬度（儘管上下都保留寬高比的空白空間），同樣如果它是高圖像，整個高度的圖像顯示與周圍的空白空間。對不起，如果我原來的問題沒有得到這個點簡潔！

來源

2014-01-14 Giovanni

你使用'background-image'還是''s？如果前者嘗試'.image {background-image：url（「your/url/here」）; background-size：contains; background-repeat：no-repeat; background-position：center; }' –

沒有即時消息使用 – Giovanni

從您的問題很難理解您期望的結果。如果你有一個固定的容器，並且你想要不同的圖像從邊到邊填充容器，只需使用'#container img {width：100％}'，圖像將相應地縮放到父容器大小。 –

這不能通過添加Javascript的img標籤來實現。相反的：

<img src="myimage.jpg">

使用

<div class="preview" style="background-image:url(myimage.jpg)"></div>

，然後添加一些CSS：

.preview { 
    background-size:contain; 
    background-repeat:no-repeat; 
    width:300px; 
    height:300px; 
}

來源

2014-01-14 20:56:03

不會將此圖片設置爲300px x 300px？ – Giovanni

是的，我只是拿了一些例子的大小，因爲你沒有說你想限制什麼大小。實際上，因爲「包含」它不會調整到這個大小，它只是將它限制到這個大小。 –

好吧，我希望它限制爲全寬或全高，以較大者爲準（即我希望整個圖像顯示：如果圖像寬度比高度減小到100％寬度，如果圖像高於寬度減少到100％的高度） – Giovanni

這可能是你想要什麼：

HTML：

<div id="container" style="background-image: url('pic1.jpg');"></div>

CSS：

#container { 
    width: 600px; 
    height: 500px; 
    overflow: hidden; 
    background-size: cover; 
    background-position: center center; 
}

但是，如果你要填寫固定容器與可變圖像的大小，如果你想保持圖像的寬高比，你將不得不犧牲一些圖像的溢出內容邊界的任何情況。

來源

2014-01-14 21:05:20

保持寬高比，但強制它進入不同的容器寬高比。這似乎是我個人用於幻燈片演示和其他應用的合適解決方案。 –

請參閱編輯問題！ – Giovanni

使用CSS調整不同大小的圖像

回答

相關問題