图像未在Flexbox布局中调整大小 [英] image is not resizing in a flexbox layout

问题描述

我试图遵循此答案中的建议，并如

I tried to follow the advice in this answer, and as shown in this CodePen, but the image that needs to flex is still keeping its original dimensions unless the screen is so narrow it is alone on the row.

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

There is another set of divs in the real page in a similar situation - it would help the page work across a much larger range of widths if the side divs would shrink.

包裹的div上有flex: auto;，其中任何图像上都有img {width: 90%; height: auto;}，该div的父对象上有style="flex: 0 1 250px;".

The div it is wrapped in has flex: auto; on it and img {width: 90%; height: auto;} for any image in it, the parent of that div has style="flex: 0 1 250px;" on it.

这是它的 CodePen .

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

I guess there is a simple mistake, if not I suppose I'll make the image the background of the div it is currently in, and set background-size: 100% auto; on it.

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>

推荐答案

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

An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot shrink below the size of its content.

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

In this case, the section element is the primary flex container.

弹性项目为.outerDiv.

因为这些弹性项目包含图像，所以它们不能缩小到图像尺寸以下.要解决此问题，请使用min-width: 0覆盖默认设置.

Because these flex items contain images, they cannot shrink below the image's size. To overcome this, override the default with min-width: 0.

修订后的代码笔

好的，因此现在该项目可以缩小内容，但图像仍然不灵活.

Okay, so now the item can shrink past the content, but the image is still inflexible.

您可以使用以下方法解决此问题:

You can fix that with:

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

修订后的数字笔

这里有更多信息: 为什么弹性商品不能超过内容尺寸?

Here's more information: Why doesn't flex item shrink past content size?

这篇关于图像未在Flexbox布局中调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！