調整圖像大小以適合div

如何調整圖像大小以適合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; 
}

來源

2011-12-26 blue-sky

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

這應該這樣做。

來源

2011-12-26 14:36:47

你爲什麼不設置img -tag的width和height屬性？

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

來源

2011-12-26 14:35:59 Alex

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

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

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

來源

2011-12-26 14:45:08

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

希望它有幫助嗎？

來源

2012-04-15 06:30:13 shawndreck

$("#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%"); 
      });

來源

2015-05-13 09:45:40

調整圖像大小以適合div

回答

相關問題