CODEWITHSUNDEEP
htmlcss
blue-sky
blue-sky

Reputation: 53806

Resize an image to fit in div

How can I resize the image to fit in the size of the 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%;
}

Something like - ?

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

Upvotes: 10

Views: 45077

Answers (5)

Minu Alex
Minu Alex

Reputation: 117

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

Upvotes: 0

shawndreck
shawndreck

Reputation: 2069

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?

Upvotes: 3

Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

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

Upvotes: 4

anuj_io
anuj_io

Reputation: 2173

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

This should do it.

Upvotes: 10

Alex
Alex

Reputation: 34978

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

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

Upvotes: 2

Related Questions