Измените размер изображения, чтобы он поместился в div

Как изменить размер изображения в размере 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%;
}

Что-то вроде -?

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

Ответы

Ответ 1

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

Это должно сделать это.

Ответ 2

объявить класс css для тега img и просто дать ему ту же высоту и ширину, что и div.Or, просто объявить его как 100% как указано

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

Ответ 3

Это может звучать как перебор, но если вы не хотите, чтобы изображение было сжато или растянуто, почему бы не изменить его пропорционально, в соответствии с размером, который вы хотите, перед отображением? Потому что в любом случае легко изменить размер PHP с помощью

Надеюсь, что это поможет?

Ответ 4

Почему бы вам не установить атрибуты width и height img -tag?

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

Ответ 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%");
            });