如何创建可缩放的水平和垂直图像？

Question

我正在处理几个设置为 inline-block 和 overflow:scroll 的图像。

目前所有图像都在同一个 class= "parent-container" 中，但只有水平图像在缩放，我的垂直图像在屏幕改变大小时保持相同大小。

我正在寻找所有我的图像以进行缩放。

我的 HTML

<div class="parent-container">

<div class="container">
<img src="1.jpg" alt="" class="image" style="width:100%">
</div>

<div class="container">
<img src="2.jpg" alt="" class="image" style="width:100%">
</div>

 <div class="container">
<img src="3.jpg" alt="" class="image" style="width:100%">
</div>


 <div class="container">
<img src="4.jpg" alt="" class="image" style="width:100%">
</div>

 <div class="container">
<img src="5.jpg" alt="" class="image" style="width:100%">
</div>

</div>

我的 CSS

.parent-container {
 width: 100%;
 max-width: 1175px;
 height: auto;
 padding: auto;
 overflow: scroll;
 overflow-y: hidden;
 margin-left: 35px;
 margin-top: 5px;
 white-space: nowrap;
 display: inline-block;
}

.container {
position: relative;
display: inline-block;
padding-right: 15px;
padding-left: 15px;
}

.image {
opacity: 1;
display: inline-block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
padding-right: 15px;
}


.parent-container .container .image {
width: auto\9; /* IE8 */
}

谢谢！

工作示例：https://jsfiddle.net/kjfomeze/

Answer 1

您可以尝试将object-fit: cover; 添加到您的图像中，并使用固定的height。这应该会缩放您的图像。

.parent-container {
   width: 100%;
   max-width: 1175px;
   height: auto;
   padding: auto;
   overflow: scroll;
   overflow-y: hidden;
   margin-left: 35px;
   margin-top: 5px;
   white-space: nowrap;
   display: inline-block;
}

.container {
  position: relative;
  display: inline-block;
  padding-right: 15px;
  padding-left: 15px;
}

.image {
  opacity: 1;
  display: inline-block;
  width: 100%;
  height: 100px;
  transition: .5s ease;
  backface-visibility: hidden;
  object-fit: cover;
}

<div class="parent-container">

  <div class="container">
    <img src="https://dummyimage.com/100x100/000/fff" alt="" class="image" style="width:100%">
  </div>

  <div class="container">
    <img src="https://dummyimage.com/200x150/000/fff" alt="" class="image" style="width:100%">
  </div>

   <div class="container">
    <img src="https://dummyimage.com/200x100/000/fff" alt="" class="image" style="width:100%">
  </div>


</div>