2011-12-26 236 views
10

如何調整圖像大小以適合div piecemaker-container的大小?調整圖像大小以適合div

<div id="piecemaker-container"> 
    <div id="piecemaker"> 
     <img src="splash.jpg" alt="some_text"/> 
    </div> 
    </div> 
#piecemaker-container { 
    display:block; 
    height:460px; 
    overflow:hidden; 
    margin: -10px auto 40px; 
    width: 960px; 
    max-width:100%; 
    max-height:100%; 
} 

喜歡的東西 - ?

#piecemaker { 
    display:block; 
    height:460px; 
    overflow:hidden; 
    margin: -10px auto 40px; 
    width: 960px; 
} 

回答

9
#piecemaker-container div, #piecemaker-container img { 
width: 100%; 
height: 100%; 
} 

這應該這樣做。

2

你爲什麼不設置img -tag的widthheight屬性?

<img src="splash.jpg" alt="some_text" width="960" height="460"/> 
+0

最好將您的樣式規則保留在您的HTML和CSS文件中。 – 2014-08-07 22:52:04

4

聲明CSS類img標籤,只是給它的高度和寬度相同的div.Or只是聲明它,爲100%定

img { width: 100%; height: 100%; } 
3

這聽起來像一個過頭,但如果你不希望圖像受到擠壓或拉伸,爲什麼不在顯示前根據所需的大小按比例重新調整大小?因爲用PHP重新調整大小非常容易

希望它有幫助嗎?

0
$("#piecemaker-container").each(function(){ 
       var imageUrl = $(this).find('img').attr("src"); 
       $(this).find('img').css("visibility","hidden"); 
       $(this).css('background-image', 'url(' + imageUrl + ')').css("background-repeat","no-repeat").css("background-size","cover").css("background-position","50% 50%"); 
      }); 
相關問題