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>
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.
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.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With