Zmień rozmiar obrazu, aby zmieścił się w dziale

Question

Jak zmienić rozmiar obrazu, aby zmieścił się w rozmiarze 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%; 
} 

Coś -

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

To powinno wystarczyć.

Answer 2

Dlaczego nie można ustawić width i height atrybuty img -tag?

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

Answer 3

zadeklarować klasę css dla znacznika img i po prostu dać mu taką samą wysokość i szerokość jak div.Or prostu zadeklarować ją jako 100%, jak podano

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

Answer 4

To może brzmieć jak przesadzić ale jeśli nie chcesz, aby obraz był wyciskany lub rozciągany, dlaczego nie chcesz go ponownie zmienić proporcjonalnie, w zależności od potrzebnego rozmiaru, przed wyświetleniem? Ponieważ i tak łatwo jest zmienić rozmiar przy użyciu PHP. Tak czy inaczej:

Mam nadzieję, że to pomaga?

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