Question

How do I fit an image in div? Image size can be max then div or min then div.

html code

<div class="main">
  <img scr="image.jpg">
</div>

CSS code

.main{
  height:200px;
  width:200px;
}

img{
  // answer code
}

How do I set image css with following:

1. image height 100 and width 100
2. image height 300 and width 300

Answer 1

You can use:

img { max-width: 100%; height: auto; } // This would help you to automatically fit the image.

The above css code would help you for the images whose size is larger than the div. But won’t fit for images which are smaller than the div. A bit of jQuery would be needed to achive your goal, please find it below:

$(document).ready(function(){
    imageWidth = $('.main img').width();
    parentWidth = $('.main').width();
    if (imageWidth > parentWidth) {
        $('.main img').css('width', '100%');
    }
});

What happens is when the image is smaller than the div it resizes itself and fits to the div as per your requirement.

Hence place the css as well as the script to work for both the conditions.