CODEWITHSUNDEEP
htmlcssimage
IcySun
IcySun

Reputation: 15

CSS rule is not applying to image

I am trying to apply CSS changes to an image added in HTML but the changes are not applying, here is what I have

HTML 

<section id = "firstimage">
  <div class = "container">
<img src = "collage2.jpg">
</section>

CSS

.container{
  width:80%;
  margin:auto
  overflow:hidden;
  height: 100%;
  width: 100%;

}

#firstimage
{
  max-width: 100%;
  height: auto;
}

Upvotes: 1

Views: 3519

Answers (3)

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

You are applying css to the <section id="firstimage"> not the img element. And also, remember to close the div. Try the following instead.

<section id="firstimage">
  <div class="container">
    <img src="collage2.jpg">
  </div>
</section>

CSS

.container{
  width:80%;
  margin:auto
  overflow:hidden;
  height: 100%;
  width: 100%;
}

#firstimage img {
  max-width: 100%;
  height: auto;
}

With the css above, you're applying the styles to the actual img element.

Upvotes: 3

Omar
Omar

Reputation: 527

Delete all space from before equal(=) and after equal(=) and close container div after img wrap

<section id="firstimage">
  <div class="container">
    <img src="collage2.jpg">
  </div>
</section>

Upvotes: 0

demo7up
demo7up

Reputation: 578

try closing the div

<section id="firstimage">
  <div class="container">
    <img src="https://www.w3schools.com/css/trolltunga.jpg">
  </div>
</section>

Upvotes: 0

Related Questions