图像未在 flexbox 布局中调整大小
[英] image is not resizing in a flexbox layout
本文介绍了图像未在 flexbox 布局中调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试遵循这个答案中的建议，如本CodePen，但需要弯曲的图像仍保持其原始尺寸，除非屏幕太窄以至于单独显示行.
在类似情况下，真实页面中还有另一组 div - 如果侧边 div 缩小，这将有助于页面在更大的宽度范围内工作.
它包裹的 div 上面有 flex: auto; 和 img {width: 90%;height: auto;} 对于其中的任何图像，该 div 的父级都有 style="flex: 0 1 250px;" .
这是它的 CodePen.
我想这是一个简单的错误，如果不是，我想我会将图像设为当前所在 div 的背景，并在其上设置 background-size: 100% auto;.
section {填充:15px；显示:弹性；flex-wrap: 包裹;边距顶部:3vw；左边距:6vw；}.outerDiv {背景颜色:rgba(50, 50, 0, 0.5);}.innerDiv {背景颜色:rgba(10, 10, 10, 0.6);显示:弹性；flex-flow: 列 nowrap;align-items: flex-end;边距:15px；}.innerDiv p {填充:6px 18px 0 15px；}.img调整大小{弹性:自动；对齐自我:居中；填充:15px；}.img 调整 img {宽度:90%；高度:自动；}
<div class="outerDiv"><div class="innerDiv" style="flex: 0 1 250px;"><h2>火箭方程</h2><p>质量比:</p><div class="imgResize"><a href="rotovator.html"><img src="http://www.moonwards.com/img/animatedRotovatorLink.png"></a>
<div class="outerDiv"><div class="innerDiv"><h2>亚轨道跳跃</h2><img src="http://www.moonwards.com/img/mapmini.jpg" width="512" height="256"><canvas id="subOrbitalCanvas" width="512" height="256"></canvas>
</section>
解决方案
弹性项目的初始设置是 min-width: auto.这意味着默认情况下，弹性项目不能缩小到其内容的大小以下.
在这种情况下，section 元素是主要的 flex 容器.
弹性项目是.outerDiv.
因为这些 flex 项目包含图像，所以它们不能缩小到图像的大小以下.为了克服这个问题，用 min-width: 0 覆盖默认值.
修改后的代码笔
好的，现在项目可以缩小超过内容，但图像仍然不灵活.
您可以通过以下方式解决此问题:
img { 宽度:100%;高度:自动；}
修改后的代码笔
以下是更多信息:为什么 flex item 不会缩小到超过内容大小?
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>
解决方案
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?
这篇关于图像未在 flexbox 布局中调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
