html 图像布局,html – 图像没有在flexbox布局中调整大小

我尝试按照

this answer中的建议,如

CodePen所示,但需要弯曲的图像仍然保持其原始尺寸,除非屏幕如此狭窄,它就在行上.

在类似的情况下,真实页面中还有另一组div – 如果侧面div会缩小,它将有助于页面在更大的宽度范围内工作.

它包含的div有flex：auto;在它和img {宽度：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.5);

}

.innerDiv {

background-color: rgba(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;

}

The Rocket Equation

Mass ratio:

Suborbital Hop