調整div和背景圖像的大小以適合使用CSS的頁面

說我想在我的頁面上有幾個div，並且背景中有圖像（如：http://www.ubudhanginggardens.com/）。我知道如何設置我的div的大小，但問題是，如果我使得瀏覽器更小，背景圖像保持不變...我想用網頁瀏覽器向上/向下縮放背景圖像。調整div和背景圖像的大小以適合使用CSS的頁面

CSS

body, html { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
} 
#container1 { 
    float: left; 
    height: 100%; 
    width: 50%; 
    background-image: url(../img/1.png); 
} 
#container2 { 
    float: left; 
    height: 100%; 
    width: 50%; 
    background-image: url(../img/2.png); 
}

來源

2013-05-02 user2343660

假設CSS3是一個選項，你可以使用['background-size']（http://www.w3schools.com/cssref/css3_pr_background-size.asp） – hexblot 2013-05-02 15:09:53

http://stackoverflow.com/問題/ 13296529/css-how-to-make-responsive-images – abracassabra 2013-05-02 15:17:57

如果你想有你的圖像縮放與您的瀏覽器，設置寬度爲百分比，而不是將其定義爲一個像素數。

所以，如果你想要的形象總是遮住半邊一個div：

<div class="my_div"> 
    <img src="http://example.com"></img> 
</div> 
<style> 
    .my_div .image { 
     width:50%; 
    } 
</style>

當你改變瀏覽器窗口大小，圖像的大小會發生變化。您可能需要查看Responsive CSS框架，例如Twitter's Bootstrap，它可以幫助您實現這種行爲。

來源

2013-05-02 15:14:46 VCNinc

class'my_div'在你的CSS中定義的標記中，而不是類'image'。你打算'.my_div img'？ – abracassabra 2013-05-02 15:19:34

問題是關於縮放背景圖像，而不是前景圖像。 – 2013-05-02 16:11:15

這可以用純CSS完成，甚至不需要媒體查詢。

爲了圖像的靈活性，只需添加max-width:100%和height:auto。圖片max-width:100%和height:auto適用於IE7，但不適用於IE8（是的，另一個奇怪的IE錯誤）。要解決這個問題，你需要爲IE8添加width:auto\9。

Source

CSS：

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
}

如果要強制圖像的固定最大寬度，只需將它放在一個容器內，例如：

<div style="max-width:500px;"> 
    <img src="..." /> 
</div>

jsFiddle example here 。沒有JavaScript要求。適用於最新版本的Chrome，Firefox和IE（這是我測試過的）。

來源

2013-05-02 15:31:18

+1爲偉大的答案和提供小提琴示例 – abracassabra 2013-05-02 15:35:12

問題是關於縮放背景圖像，而不是前景圖像。 – 2013-05-02 16:10:29

調整div和背景圖像的大小以適合使用CSS的頁面

回答

相關問題