Ridimensionare un'immagine per adattarsi al div

Question

Come posso ridimensionare l'immagine per adattarla alla dimensione del div 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%; 
} 

Qualcosa di simile -?

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

Questo dovrebbe farlo.

Answer 2

Perché non si imposta la width e height attributi del img -tag?

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

Answer 3

dichiarare una classe CSS per il tag img e basta dare la stessa altezza e larghezza del proprio div.Or dichiararla come 100% come dato

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

Answer 4

Questo può sembrare un esagerare, ma se si non vuoi che l'immagine sia schiacciata o allungata, perché non ridimensionarla proporzionalmente, in base alla dimensione che desideri, prima di visualizzarla? Perché è molto più semplice ridimensionare con PHP in ogni caso

Spero che sia d'aiuto?

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