Resize An Image To Fit In Div

Question

How can I resize the image to fit in the size of the div piecemaker-container?

Solution 1:

#piecemaker-containerdiv, #piecemaker-containerimg {
width: 100%;
height: 100%;
}

This should do it.

Solution 2:

declare a css class for the img tag and just give it the same height and width as the div.Or just declare it as 100% as given

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

Solution 3:

This may sound like an overdo but if you don't want the image to be squeezed or stretched, why not re-size it proportionally, according to the size you want, before displaying? Because it is pretty much easy to re-size with PHP anyway

Hope it helps?

Solution 4:

Why don't you set the width and height attributes of the img-tag?

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

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

Html5 Guru