相关疑难解决方法(0)

我的网站上有一个用户可以上传图片的图库.

我希望图像位于保持其高度的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%;
    }
}

以上效果很好,画廊总是500px高,图像高度不超过500px.我遇到问题虽然图像较小,但如果用户上传的图片非常小,我希望它"炸毁"至少200px.我知道这可以通过min-height在图像上设置来实现,问题是,如果图像高度小于200px但是说宽度为2000px,则图像的高度会高达200px,但是长宽比是拧紧,因为图像比图像父div更宽.

我怎样才能达到最小高度但保持纵横比？