Question

我在列方向的flexbox中放置了2张图像，并且当我调整浏览器窗口的尺寸时，我希望图像的尺寸能够调整。他们没有像我期望的那样改变。

我希望图像以原始比例更改，但是无论我使用哪种CSS样式都失败。

当我水平调整窗口大小时效果很好，而当我垂直调整窗口大小时效果很好。

另外，图像超出了flexbox div的范围，该如何防止？

#box{
    width: 100%;
    height: 100%;
}
#container {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 30%;
    background-color: red;
}
#photo {
    width: 100%;
    height: auto;
}

<div id="box">
  <div id="container">
    <img id="photo" src="1.JPG">
    <img id="photo" src="2.JPG">
  </div>
</div>

Answer 1

有人认为我通常在这种情况下使用css将background-size:contain;设置为背景图像

一个例子：

#box{
    width: 100vw;
    height: 100vh;
}
#container {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 30%;
    background-color: red;
}
.photo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:contain;
}



<div id="box">
  <div id="container">
    <div class="photo" style="background-image: url('https://picsum.photos/200/300/?random')"></div>
    <div class="photo" style="background-image: url('https://picsum.photos/300/200/?random')"></div>
  </div>
</div>

https://jsfiddle.net/vbanj8st/

Flexbox中的图像无法正确缩放

1 个答案: