Cambiar el tamaño de una imagen para que quepa en div

Question

¿Cómo puedo cambiar el tamaño de la imagen para que se ajuste al tamaño de la 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%; 
} 

Algo así como -?

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

Esto debe hacerlo.

Answer 2

¿Por qué no se establece la width y height atributos de la img -tag?

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

Answer 3

declarar una clase CSS para la etiqueta img y sólo le dan la misma altura y anchura que la div.Or acaba de declarar como 100% como se da

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

Answer 4

Esto puede sonar como una overdo pero si No quiero que la imagen sea comprimida o estirada, ¿por qué no volver a clasificarla proporcionalmente, de acuerdo con el tamaño que desee, antes de mostrarla? Debido a que es bastante fácil volver a clasificar con PHP de todos modos

Espero que ayude?

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