图像缩放不好

Question

我有一个包含动态生成图像的div，现在每个图像都有不同的比例，现在我的图像没有按比例缩放。

预期结果：

​

​

到目前为止，我的解决方案如下

​

.container {
  display: flex;
  justify-content: space-between;
}

.conatiner_box {
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  border-left: 5px solid rgb(232, 159, 42);
  margin: 0px auto;
  overflow: hidden;
}

.image-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  transition: all 0.1s linear 0s;
}

<div class="container">
   <div class="conatiner_box">
      <img src="https://i.ibb.co/HP3tksz/image1.jpg" class="image-box">
   </div>
   <div class="conatiner_box">
      <img src="https://i.ibb.co/Jz9cW7W/image2.jpg" class="image-box">
   </div>
</div>

​

下面是jsfiddle live demo

我需要做些什么来解决这个问题呢？

Answer 1

如果您希望图像具有响应性，则必须设置：

max-width:100%;
max-height: 100%;

而不是width和height。

同时去掉你不需要的绝对职位

演示：

​

.container {
  display: flex;
  justify-content: space-between;
}

.conatiner_box {
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  border-left: 5px solid rgb(232, 159, 42);
  margin: 0px auto;
  overflow: hidden;
}

.image-box {
  max-width: 100%;
  max-height: 100%;
  /*position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;*/
  transition: all 0.1s linear 0s;
}

<div class="container">
   <div class="conatiner_box">
      <img src="https://i.ibb.co/HP3tksz/image1.jpg" class="image-box">
   </div>
   <div class="conatiner_box">
      <img src="https://i.ibb.co/Jz9cW7W/image2.jpg" class="image-box">
   </div>
</div>

​

Answer 2

您应该从.image-box中删除position: absolute，并从.conatiner_box中删除display: flex；。同样，图像应该有宽度: 100%；高度:自动；如果你想让所有的框都有相同的尺寸，你应该定义宽度和高度，并使用object: fit；就像你可以在CSS中处理背景图像一样(但它不能在it浏览器中工作，请检查caniuse)。

此外，您应该尝试有类似的比例图像更好的用户界面。