rmce rmce - 4 months ago 7
CSS Question

Image can only be edited by putting 'img' after div html and css

I am building a website and tried to resize a div image in my CSS file, although I was unable to do this. I fixed this issue by putting img after the div name in the CSS file. When building previous websites, I have not had to do this, is there a fix or am I doing something wrong? Any help would be greatly appreciated. I will provide an example below. Thanks :)

Image will not resize

HTML

<div class="example_image">
<img src="example.jpg">
</div>


CSS

.example_image{
width: 333px;
height: 333px;
}


*CSS that does let me resize my image*

.example_image img{
width: 333px;
height: 333px;
}

Answer

By doing this

.example_image{
    width: 333px;
    height: 333px;
}

you are just resizing the div where the image resides. The image stays small in a resized div.

And this

.example_image img{
    width: 333px;
    height: 333px;
}

does explicitly resize the image. As the div can't stay small after that, it's resized too.

When building previous websites, I have not had to do this, is there a fix or am I doing something wrong?

Can only be true if you did still set width and height to inherit for img, like this:

.example_image{
    width: 333px;
    height: 333px;
}
.example_image>img{
   width:inherit;
   height:inherit;
}
<div class="example_image">
    <img src="example.jpg">
</div>