Html CSS div高度百分比不工作

因此，我在div

#周年img容器中有一个img
#周年img
。我只想让img在调整浏览器窗口的大小时自动调整大小（最大大小为
15em
by
15em
）。我试过很多方法，但使用百分之一百的高度根本不会影响它


HTML

编辑：通过删除HTML文件中的高度和宽度（of#img）和设置来解决：

#anniversary-img-container {
    max-height: 15em;
    max-width: 15em;}

您可以始终使用背景图像作为图像容器，这样可以更好地控制图像的行为。像这里

尝试使用背景属性
 正如您所说，图像嵌套在容器中：

<div class="img-container" id="anniversary-img-container">
  <img src="images/anniversary-img.jpg" width="862" height="840" alt="Celebrating 60 years of Catholic service" id="anniversary-img" />
</div><!-- end #anniversary-img-container -->

之后，您需要确保图像始终适合容器。我们将使用
！重要信息
要覆盖html标记内部设置的
width=“862”
，尽管设置其
max width:100%
以确保其不会高于862px:

#anniversary-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

这是一个基本的积累。检查

最好删除html标记内部的
width=”“height=“
，这样就不需要使用
！重要信息
在css文件中
 您可能希望匿名化该代码中的内容；-）@Eduardo06sp我不确定，我是否正确回答了你的问题。请随意纠正我对你的理解。你的问题是对的。我不得不从HTML中去掉宽度和高度。我在底部的帖子中分享了我的解决方案。
#anniversary-img-container {
    height: 15em;
    width: 15em;
    margin-left: 2em;
    margin-bottom: 1em;
    float: left; /* make container proportionate to img */
    background: url(images/anniversary-img.jpg) no-repeat; /*center center maybe?*/
    background-size: cover; /*contain or custom value*/
} 
/* #anniversary-img {
    max-width: 100%;
    max-height: 100%;} */

<div class="img-container" id="anniversary-img-container">
  <img src="images/anniversary-img.jpg" width="862" height="840" alt="Celebrating 60 years of Catholic service" id="anniversary-img" />
</div><!-- end #anniversary-img-container -->

#anniversary-img-container {
  width: 100%;
  height: auto;
}

#anniversary-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}