當瀏覽器調整大小時圖像溢出容器

我已經開始設計一個網站，並且我已經使用了一個封裝器來定位我的信息和圖像。我已經將第一張圖片添加到包裝中，並且當瀏覽器變大時它看起來很棒。當瀏覽器調整大小時圖像溢出容器

但是，當我調整瀏覽器的大小時，圖像（這是一個穿過頁面的鏈）移出包裝的每一邊。

理想情況下，我想改變它，以便在瀏覽器調整大小並在頁面上滾動時，鏈條保持在包裝內。

body { 
    background-color:#2791ce; 
    background-image:url(../img/images/lightblue_02.jpg); 
    background-size:98%; 
    background-repeat: repeat-y; 
    background-position:center; 
} 

#wrapper { 
    width:1174px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    padding-bottom:350px; 
} 

#logo { 
    position:relative; 
    padding-left:6%; 
    margin-left:auto; 
    margin-right:auto; 
} 

#chain { 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    padding-top:5%; 
}

<html> 
</head> 
<body/> 
<div id="wrapper"> 
    <div id="logo"> 
     <img src="img/images/skip.png"/> 
    </div> 
    <div id="chain"> 
     <img src="img/images/images/images/Untitled-1_02_02.png" width="1174" height="32" /> 
    </div> 
</div>  
</div> 
</body> 
</html> 
<html>

來源

2012-12-23 please delete me

這個網站在線，我們可以在哪裏查看並查看您的問題？ –

我想你在頁面上使用了太多的CSS – underscore

如果你想保持縱橫比，嘗試添加這些行到你的形象。我正在考慮img成爲你的形象的一部分。

.img { 
max-width:<max-width of your parent div> 
max-height:<max-height of your parent div> 
}

如果要縮放圖像，請插入以下代碼。

.img { 
width:100%; 
max-width:100%; 
display:block; 
height:100%; 
max-height:100%; 
}

來源

2012-12-23 20:34:40

當瀏覽器調整大小時圖像溢出容器

回答

相關問題