我尝试按照this answer中的建议进行操作,如此CodePen所示,但需要弯曲的图像仍然保持其原始尺寸,除非屏幕太窄,否则就是单独的排。
在类似情况下,真实页面中还有另一组div - 如果侧面div会缩小,它将有助于页面在更大的宽度范围内工作。
它包含的div上有flex: auto;
,img {width: 90%; height: auto;}
表示其中的任何图片,该div的父亲都有style="flex: 0 1 250px;"
。
这是CodePen。
我想有一个简单的错误,如果不是,我想我会将图像作为当前div的背景,并在其上设置background-size: 100% auto;
。
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>
答案 0 :(得分:8)
弹性项目的初始设置为min-width: auto
。这意味着默认情况下,弹性项目不能缩小到低于其内容的大小。
在这种情况下,section
元素是主要的flex容器。
弹性项目为.outerDiv
。
由于这些弹性项目包含图像,因此它们无法缩小到图像大小以下。要解决此问题,请使用min-width: 0
覆盖默认值。
好的,现在该项目可以缩小内容,但图像仍然不灵活。
你可以用以下方法解决这个问题:
img { width: 100%; height: auto; }