image is not resizing in a flexbox layout

╄→尐↘猪︶ㄣ 提交于 2019-11-30 15:42:32

问题


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.

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.

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.

Here is a CodePen of it.

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>

回答1:


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.

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

The flex items are .outerDiv.

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

revised codepen

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; }

revised codepen

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



来源:https://stackoverflow.com/questions/41774646/image-is-not-resizing-in-a-flexbox-layout

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!