CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3790976
user3790976

Reputation: 21

Image width and height without stretching or overflow

I am trying to get an image with unknown height and width to fit inside of a div with 300px width and 300px height. I always need to see the entire image.

Example 1: Image that comes in with 300px height and 200px width, will result in 100% height and 66% width of it's parent div

Example 2: Image that comes in with 200px height and 300px width, will result in 66% height and 100% width of it's parent div

Upvotes: 0

Views: 200

Answers (3)

Manas Atabaev
Manas Atabaev

Reputation: 16

.your_block img {
    max-width: 100%;
    max-height: 100%;
}

Upvotes: 0

pauloancheta
pauloancheta

Reputation: 359

I'm not sure if this but I think you can ask it with jQuery:

if($('incoming_pic').css('height') > '300px'){
  //do something
}

Upvotes: 0

zfrisch
zfrisch

Reputation: 8660

If you set the image as the background-image of the div you can use the css style

background-size: contain;

Here's a jsfiddle! http://jsfiddle.net/04y4dm06/1/

Upvotes: 0

Related Questions