How to fit a image completely in a div container?

Question

I have create a div and an image inside that div. I want to fit that image completely inside that div. So can anyone tell me how to do so?

Answer 1

You can do it with JavaScript.

Answer 2

[CSS]
#wrapper {
width:200px;
height:300px;
border:1px solid black;
}

[HTML]
<div id="wrapper">
<img src="https://www.sololearn.com/images/tree.jpg" width=100% height=100% />
</div>

The mismatched size of the containing div + the black border is to emphasize the fact that images scale proportionally when you only give one dimension.

If you omit either dimension (try it) proportional scaling will make the image either not fill the entire div or break out of its container.

edit: In support of Paul Grasser's answer, if you then change the size of the wrapping div (using javascript), since the image is set to a percentage of its container it will adjust automatically alongside its wrapper.

Answer 3

background-size: contain; // not contained

Answer 4

You can just adjust the width and height, if that's what you mean.

Answer 5

I want to fit image in container even if anyone changes its size.