图像未在 flexbox 布局中调整大小

Question

我尝试遵循this answer 中的建议，如CodePen 所示，但需要弯曲的图像仍保持其原始尺寸，除非屏幕太窄以至于单独在一行中。

在类似情况下，真实页面中还有另一组 div - 如果侧面 div 缩小，它将有助于页面在更大的宽度范围内工作。

包裹它的 div 上面有 flex: auto; 和 img {width: 90%; height: auto;} 用于其中的任何图像，该 div 的父级有 style="flex: 0 1 250px;" 。

这是它的CodePen。

我想这是一个简单的错误，如果不是我想我会将图像作为它当前所在的 div 的背景，并在其上设置background-size: 100% auto;。

section {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 3vw;
  margin-left: 6vw;
}
.outerDiv {
  background-color: rgba(50, 50, 0, 0.5);
}
.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px;
}
.innerDiv p {
  padding: 6px 18px 0 15px;
}
.imgResize {
  flex: auto;
  align-self: center;
  padding: 15px;
}
.imgResize img {
  width: 90%;
  height: auto;
}

<section>

  <div class="outerDiv">
    <div class="innerDiv" style="flex: 0 1 250px;">
      <h2>The Rocket Equation</h2>
      <p>Mass ratio:</p>
      <div class="imgResize">
        <a href="rotovator.html">
          <img src="http://www.moonwards.com/img/animatedRotovatorLink.png">
        </a>
      </div>
    </div>
  </div>

  <div class="outerDiv">
    <div class="innerDiv">
      <h2>Suborbital Hop</h2>
      <img src="http://www.moonwards.com/img/mapmini.jpg" width="512" height="256">
      <canvas id="subOrbitalCanvas" width="512" height="256"></canvas>
    </div>
  </div>

</section>

Answer 1

弹性项目的初始设置是min-width: auto。这意味着默认情况下，弹性项目不能缩小到其内容的大小以下。

在这种情况下，section 元素是主要的弹性容器。

弹性项目是.outerDiv。

因为这些弹性项目包含图像，所以它们不能缩小到图像大小以下。要克服这个问题，请使用 min-width: 0 覆盖默认值。

revised codepen

好的，现在项目可以缩小到内容之外，但图像仍然不灵活。

您可以通过以下方式解决此问题：

img { width: 100%; height: auto; }

revised codepen

这里有更多信息：Why doesn't flex item shrink past content size?