css - 调整内部图像大小时如何自动调整容器宽度？

Question

我有一个问题，为了清楚起见，我将在此处简化(这真的让我很沮丧)。

我有一个容器，里面有两个 div(一个里面有一个图像，它会被调整大小)，像这样:

HTML

<div id="container">

<div id="block1">

    <img src="images/clank.png">

</div>

<div id="block2">

</div>

</div>

CSS

#container {
height:350px;
background-color: #000

}

img {

max-width: 60%;
height: auto;

}

#block1 {
background-color: #fff;
float:left;
height:auto;
width: auto;
border-style: solid;
border-width: 1px;
border-color: #000;
}

#block2 {
background-color: #456545; 
height:100%;
overflow: hidden;
}

Here is an image with the problem

上图说明了我的问题。调整#block1 内的图像大小后，#block1 的高度减小，与图像的新高度相同(这是我想要的)。但是，我希望宽度也能做到这一点，但这并没有发生。宽度保持不变，因此#block1 的宽度不会更改为等于图像的新大小(它保持原始图像的大小)。我希望 #block1 的宽度根据图像的新较小尺寸自动减小。

这可以通过 CSS 实现吗？

谢谢

Answer 1

更新:

如果您不希望您的 img 元素占据包含 div 的全部尺寸，您可以使用 img通过设置 padding 属性的百分比，元素按容器的高度和宽度百分比缩放。请参阅下文了解我的意思。

旧:

您不能将 img 的 max-width 设置为 60% 并期望具有容器与 img 的容器相匹配。当我移除了 max-width 限制后请看下面:

*, :before, :after {
 box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#container {
  height: 350px;
  background-color: #000
}

img {
  width: 100%;
  padding: 0 50% 50% 0;
}

#block1 {
  background-color: #fff;
  float: left;
  height: auto;
  width: 20%; /* change this to see that the div fits the image properly. */
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

#block2 {
  background-color: #456545;
  height: 100%;
  overflow: hidden;
}

<div id="container">
  <div id="block1">
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97300&w=200&h=300">
  </div>
  <div id="block2">
  </div>
</div>