使用CSS设置img大小，由填充宽度或高度决定。保持长宽比

Question

给定一个具有设置宽度和高度的框，例如70vhx600px。

当高度或宽度的边缘满足时，我们如何在该框内制作图像，展开、放大（并保持纵横比）以停止增长/放大。

这意味着您将始终看到该框中图像的整个高度和宽度。

请注意，框中并排包含几个img，因此当我们“滚动”这个“框”时，我们总是可以看到整个图像。

让我用三张图片来说明这一点（每个图片下面都有注释）：

图像上方的第一张图像不填充高度或宽度，但它们保持长宽比。

第二，使用拉伸填充高度。宽度似乎保持不变。

第三，不管外箱的设置高度如何，我们都希望得到什么。

用视频来评论第三个。

请查看它。

我展示了我的愿望和当前的问题。

下面是显示数字3、css和html的代码段。

article.product {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 0 1 auto;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    flex-direction:column;
    border:10px solid rgba(230, 230, 230, 1);
    margin-bottom:10px;
}

article.product > section.gallery {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 0 1 auto;
    -ms-flex-direction:row;
    -webkit-flex-direction:row;
    flex-direction:row;
    overflow-x: scroll; -webkit-overflow-scrolling: touch;
}

article.product > section.gallery > img {
    object-fit:contain;
    object-position:0 0;
    border:10px solid red;
    min-height:80vh;
    max-width:1180px;
    max-height:80vh;
}

<article class=product>
  <section class=gallery>
         <img src="https://image-us.samsung.com/SamsungUS/mobile/phones/06102019-new/First_S10e_Lockup1_Black_gallery.jpg?$product-details-jpg$"/>
         
         <img src="https://corporate.bestbuy.com/wp-content/uploads/2018/02/STAR_blog_v01.jpg"/>
         
         <img src="https://i.insider.com/5c80383026289813a2172e82?width=1100&format=jpeg&auto=webp"/>
  </section>
</article>

在展开模式下运行代码段并调整窗口高度。

编辑

更新了剪辑并创建了一个新视频。问题只是高度有一个最小高度。

Answer 1

将您为图像编写的CSS替换为以下内容

article.product>section.gallery>img {
   max-width: 100%;
   max-height: 100%;
   margin: auto;
}

图像占用较大的属性，即宽度或高度。边距：自动负责定位图像。

下面的代码段：

article.product {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 0 1 auto;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  border: 10px solid rgba(230, 230, 230, 1);
  margin-bottom: 10px;
}

article.product>section.gallery {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 0 1 auto;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  height: 70vh;
}

article.product>section.gallery>img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<article class=product>
  <section class=gallery>
    <img src="https://image-us.samsung.com/SamsungUS/mobile/phones/06102019-new/First_S10e_Lockup1_Black_gallery.jpg?$product-details-jpg$" />

    <img src="https://corporate.bestbuy.com/wp-content/uploads/2018/02/STAR_blog_v01.jpg" />

    <img src="https://i.insider.com/5c80383026289813a2172e82?width=1100&format=jpeg&auto=webp" />
  </section>
</article>