调整图像大小以适合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; 
}

答

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

这应该这样做。

答

你为什么不设置img -tag的width和height属性？

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

最好将您的样式规则保留在您的HTML和CSS文件中。 – 2014-08-07 22:52:04

答

声明CSS类img标签，只是给它的高度和宽度相同的div.Or只是声明它，为100％定

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

答

这听起来像一个过头，但如果你不希望图像受到挤压或拉伸，为什么不在显示前根据所需的大小按比例重新调整大小？因为用PHP重新调整大小非常容易

希望它有帮助吗？

答

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

调整图像大小以适合div

相关推荐