Question

给出一个设置了宽度和高度的框，例如70vh x 600px。

当遇到高度或宽度的任一边时，我们如何在该框内制作图像，扩展，放大（并保留长宽比）以停止增长/放大。

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

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

在三张图片（每张评论下）中让我说明：

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

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

第三是我们想要的，而与外箱的高度无关。

评论third using a video instead。

请查看。

我展示了我的愿望以及当前存在的问题。

下面是显示数字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>

以扩展模式运行代码段并调整窗口的高度。

编辑

更新后的内容已被剪切并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

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

1 个答案: