弹性盒子布局中的图片无法调整大小

Question

弹性盒子布局中的图片无法调整大小

htmlcssflexboxresponsive-images

25

我尝试按照这个答案所建议的方法，并且如此CodePen所示，但是需要弹性的图像仍然保持其原始尺寸，除非屏幕太窄以至于它独自位于一行上。

在实际页面中还有另一组处于类似情况的divs——如果侧面的divs能够缩小，将有助于页面在更大范围的宽度上工作。

包装它的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>

- kim holder

问题不是很清楚。.imgResize > a > img 中的图像具有相对的90％宽度属性，因此它会随父元素自适应，表现出响应式行为。您所说的“需要弹性的图像仍然保持其原始尺寸”是什么意思？当窗口变小时，它会重新调整大小。 - Michael Coker

@MichaelCoker 只有在第二个 outerDiv 包裹后才会调整大小。我希望它可以在需要空间时缩小，并在有多余空间时扩展。 - kim holder

为什么不只是从section中移除flex-wrap: wrap;，这样第二个outerDiv就不会换行了？ - Michael Coker

@MichaelCoker 页面上还有其他类似的div，如果它们能够缩小，那么在各种宽度下都能更好地工作。 - kim holder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

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

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

flex项目是.outerDiv。

由于这些flex项目包含图像，它们不能缩小到图像的大小以下。为了克服这个问题，使用min-width: 0覆盖默认设置。

修改后的CodePen链接

现在可以使项目缩小到其内容以下，但图像仍然不灵活。

您可以使用以下代码解决这个问题：

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

修订版 CodePen

这里有更多信息：为什么 Flex 项目不会缩小到内容大小以下？