divに収まるように画像サイズを変更

Question

piecemaker-containerのサイズに合わせて画像のサイズを変更するにはどうすればよいですか？

<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%; 
} 

ような何か - ？あなたがimg -tagのwidthとheight属性を設定していないのはなぜ

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

Answer 1

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

これはそれを行う必要があります。

Answer 2

？

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

Answer 3

imgタグのCSSクラスを宣言し、

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

Answer 4

与えられたとしてdiv.Orはちょうどこれはやり過ぎのようなあなたならば聞こえるかもしれないが、100％として、それを宣言するようちょうどそれを同じ高さと幅を与えます画像を絞ったり伸ばしたりしないようにしてください。表示する前に、サイズに合わせてサイズを変更してみてください。とにかくPHPでサイズを変更するのはかなり簡単だから

希望しますか？

Answer 5

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