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

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

70vh

x

600px

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

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

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

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

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

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

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

评论这篇文章

请查看

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

下面是显示数字3的代码片段，css和html

article.product{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
flex:01自动；
-ms-flex方向：列；
-webkit柔性方向：列；
弯曲方向：立柱；
边框：10px固体rgba（230、230、230、1）；
边缘底部：10px；
}
article.product>section.gallery{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
flex:01自动；
-ms柔性方向：行；
-webkit柔性方向：行；
弯曲方向：行；
溢出-x：滚动；-webkit溢出滚动：触摸；
}
article.product>section.gallery>img{
对象匹配：包含；
对象位置：0；
边框：10px纯红；
最小高度：80vh；
最大宽度：1180px；
最大高度：80vh；
}

---

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

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

图像采用较大的属性，即

宽度

或

高度

。

margin:auto

负责定位图像

下面的片段：

article.product{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
flex:01自动；
-ms-flex方向：列；
-webkit柔性方向：列；
弯曲方向：立柱；
边框：10px固体rgba（230、230、230、1）；
边缘底部：10px；
}
article.product>section.gallery{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
flex:01自动；
-ms柔性方向：行；
-webkit柔性方向：行；
弯曲方向：行；
溢出-x：滚动；
-webkit溢出滚动：触摸；
高度：70vh；
}
article.product>section.gallery>img{
最大宽度：100%；
最大高度：100%；
保证金：自动；
}

你好，艾伦，谢谢，不幸的是，它不能100%工作。您是否以整页模式运行代码段？如果是这样，请尝试调整窗口的高度。您将看到图像变得比长方体的高度小。高度与长方体高度的关系不正常。基本上我想要的是设置最小高度、最小宽度，然后根据img比率取消一个。