Question

我希望随着窗口尺寸变小而使我的图像变小。

但是，我必须按宽度定义这两个图像的大小，但是因为'max-width'覆盖'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我真的没有得到你想要实现的那种布局。你能改变你的帖子并提供一个例子吗？

Answer 2

当您同时使用max-width和div { width: 90%; padding: 12px; } .parent { max-width: 1000px; background-color: rgb(255,0,0); } .child { max-width: 600px; background-color: rgb(255,255,0); } .grandchild { max-width: 400px; height: 100px; background-color: rgb(0,0,255); }时，通常是因为您为元素提供了相对于其父元素（或视口或当前字体大小或基本字体）的宽度 -size），但你也想明确说明一个绝对宽度，超过该宽度，元素不应该加宽。

工作示例：

<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>

max-width

如果您在一个完整的窗口中运行该示例并缩小窗口大小然后逐渐增大它，您将看到每个div相对于其父级扩展...直到它们到达{{1}}之后他们不再扩大。

如何定义宽度和使用最大宽度

2 个答案: