CSS规则不适用于图片

Question

我正在尝试将CS​​S更改应用于以HTML格式添加的图片，但更改未应用，这是我的内容

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;
}

Answer 1

您正在将{css}应用于<section id="firstimage">而不是img元素。此外，请记得关闭div。请尝试以下方法。

<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;
}

使用上面的css，您可以将样式应用于实际的img元素。

Answer 2

尝试关闭div

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

Answer 3

删除等于（=）之前和等于（=）之后的所有空格，并在img wrap之后关闭容器div

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