+ 1

How to fit a image completely in a div container?

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?

15th Jul 2018, 3:43 AM
Amit Rawat
Amit Rawat - avatar
5 odpowiedzi
0
You can do it with JavaScript.
15th Jul 2018, 3:50 AM
Paul Grasser
Paul Grasser - avatar
+ 5
[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.
15th Jul 2018, 4:11 AM
Kirk Schafer
Kirk Schafer - avatar
+ 2
background-size: contain; // not contained
15th Jul 2018, 5:04 AM
Calviղ
Calviղ - avatar
+ 1
You can just adjust the width and height, if that's what you mean.
15th Jul 2018, 3:46 AM
Paul Grasser
Paul Grasser - avatar
+ 1
I want to fit image in container even if anyone changes its size.
15th Jul 2018, 3:47 AM
Amit Rawat
Amit Rawat - avatar