html - 如何定义宽度并使用最大宽度

Question

我想让我的图像随着窗口尺寸变小而变小。

但是，我必须按宽度定义这两个图像的大小，但因为“最大宽度”覆盖了“宽度”，所以它使图像变得非常小？我需要使用“最大宽度”来调整图像大小。但是，我在左侧有两个图像，我同时使用了 width 和 max-width 并且它的宽度已定义并调整大小？我对其他两个做错了什么？

img {
  width: 100%;
  height: auto;
  width: auto\9;
}
/* css for the two larger images on the left-hand side*/

#imageleft {
  display: inline-block;
  height: 30px;
}
/* css for the two smaller images on the right-hand side*/

#imageright {
  display: inline-block;
  width: 50px;
  height: 100px;
}

<!-- large images to left -->
<div id="imageleft">
  <a href="index.html">
    <img src="images/photo-1464375117522-1311d6a5b81f.jpeg" alt="Guitar image" style="max-width:100%; width:600px;height:400px">
  </a>
  <a href="index.html">
    <img src="images/photo-1470020618177-f49a96241ae7.jpeg" alt="Fire breather" style="max-width:100%; width: 300px;height: 400px">
  </a>
</div>

<!-- small images to the right -->
<div id="imageright">
  <a href="index.html">
    <img src="images/photo-1472653431158-6364773b2a56.jpeg" alt="festival" style=" max-width: 100%; height: 200px">
  </a>
  <a href="index.html">
    <img src="images/photo-1473396413399-6717ef7c4093.jpeg" alt="stage view" style="width:291px; max-width: 100%;height: 196px">
  </a>
</div>

Answer 1

@helpme123 我真的不知道你想要实现什么样的布局。您能否更改您的帖子并提供示例？