保持最小/最大高度/宽度的长宽比？

html CSS

NearPro

2020-03-23

我的网站上有一个图库，用户可以在其中上传图像。

我希望图像位于保持其高度的div中，图像的高度不应大于500px。宽度应自动保持纵横比。

HTML：

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

我试过这个CSS：

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        max-width: 100%;
    }
}

上面的方法效果很好，图库始终高500像素，图片的高度永远不会超过500像素。尽管使用较小的图像会遇到问题，但是如果用户上传的图像非常小，我希望图像“爆炸”到最小200px。我知道可以通过min-height在图像上设置a来实现，这是一个问题，如果图像的高度小于200px但宽度为2000px，则图像的高度会膨胀为200px，但是长宽比为拧紧，因为图像比图像父div宽。

如何保持最小身高，但保持长宽比？

第3096篇《保持最小/最大高度/宽度的长宽比？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
达蒙小胖 2020.03.23

您要查找的属性是object-fit。这是Opera的一项创新，您可以在其2011年关于对象适配的开发文章中了解更多（是的，已经存在了很长时间）。几年前，我无法向您推荐它，但是caniuse显示其他所有人都开始追赶它：

  • Opera 10.6-12.1（-o-前缀）
  • 铬31+
  • 歌剧19+
  • Safari 7.1以上
  • iOS 8以上
  • Android 4.4以上

http://caniuse.com/#search=object-fit

#gallery img {
    -o-object-fit: contain;
    object-fit: contain;
}

contain无论如何，使用值都会强制图像保持其纵横比。

或者，您可能要改用此方法：

#gallery img {
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
}

http://sassmeister.com/gist/9b130efdae95bfa4338e

樱 2020.03.23

我知道要完成此操作的唯一方法是将width或设置height为auto。

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        width: auto;
    }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android