CODEWITHSUNDEEP
htmlcss
user8231918
user8231918

Reputation:

img height/width ignoring parents div height/width

I have had this problem many times and the way i fix it is by adding width and height when declare the img on html such as below:

<img src="outside.jpg" width="375px" height="375px">

however if I do as below it will not respect the parents div

<div class="imgBox">
     <img src="outside.jpg">
</div>

CSS parents div

.imgBox{
    height: 375px;
    width: 375px;
    border: 1px solid red;
    margin-right: 20px;
}

Why does that happen? why does img ignores their parents size?

Upvotes: 2

Views: 3360

Answers (4)

Linkliman
Linkliman

Reputation: 86

This is an HTML/CSS problem, the size of a child is not define by the size of his parents. This is due of the default value of height and width. In CSS default value of height and width is : 

img{
    height: auto;
    width: auto;
}

auto let the browser calculates the height, so it's not the best way.

For a cleaner code use height: inherit; and width width: inherit; that allows the child inherits this property from its parent element

Upvotes: 4

Natzin
Natzin

Reputation: 13

you have to add class inline with the img url like this:

<img src="outside.jpg" class="imgBox">

Upvotes: 0

Patrik Kreh&#225;k
Patrik Kreh&#225;k

Reputation: 2683

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

So img will never be bigger than its parent.

Upvotes: 0

Michal
Michal

Reputation: 3642

Image element have always size of displayed image if you do not set different size.

Add this css:

.imgBox img {
    width: 100%;
    height: auto;
    display: block;
}

https://codepen.io/anon/pen/vJmyee

Upvotes: 3

Related Questions