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

NearPro2020-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宽。

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

达蒙小胖2020/03/23 21:50:03

您要查找的属性是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 21:50:03

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

#gallery{
    height: 500px;

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer