HTML & CSS Why does the class work inside the img tag but not inside div?

[hhaarr]

Hello everyone

why does it work here

[CODE lang="html" title="html"]<div>
<img src="pix.jpeg" alt="Eastern Port" class="A5">
</div>[/CODE]

but not here

<div class="A5" >
      <img src="pix.jpeg" alt="Eastern Port">
</div>

this is as far as it goes for the class in CSS

.A5 {
        width: 50%;
}

Thanks for any help

 

[Malcolm]

Hi there,

Welcome to Code Forum!

I will test this, but you could tell us what your experiencing? And what you’re trying to achieve so that we can get a better solution for you?

 

[LTomy]

Hello!
As @Malcolm said, you need to be more specific!
However, I think what you expect is the two codes to produce the same result, right? The thing is the size of an <img>, by default, does not depend on its parent, so changing the size of the <div> will, by default, no affect the <img>.
If you want the picture to be the same width as the <div>, you must give a relative width (in %) to the <img>:

<div class="A5" >
      <img src="pix.jpeg" alt="Eastern Port">
</div>

A5{

    width: 50%;
}

A5 img{
    width: 100%;
}

Above, the <div> element takes 50% of the with of its parent and the <img> takes 100% of the width of the <div>.