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

Question

给定一个具有固定宽度和高度的盒子，比如70vh x 600px。

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

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

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

让我在三个 图像中说明它（每个下的cmets）：

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

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

第三是我们想要的，不管外盒的设定高度。

评论third using a video instead。

请查看。

我展示我想要什么以及当前的问题是什么。

下面是代码 sn-p 显示数字 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>

在展开模式下运行 sn-p 并调整窗口的高度。

编辑

更新了截图和created a new video。问题只是高度有一个最小高度。

Answer 1

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

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

图像占用较大的属性，即width 或height。 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>

JSFiddle link