Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

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>
like image 248
kim holder wants Monica back Avatar asked Jan 21 '17 00:01

kim holder wants Monica back


People also ask

How do I resize an image in flexbox?

You can easily shrink an image by using the flex-wrap property in CSS and it specifies whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked.

Does flexbox work on images?

Now, we can introduce flexbox to lay our images out. The focus is on the ul wrapper element holding all the image items. First, we must make the ul wrapper a flex container by setting its display property to flex . Once we do this, its direct children (the li elements) become flex items.


1 Answers

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?

like image 135
Michael Benjamin Avatar answered Sep 29 '22 12:09

Michael Benjamin