html CSS -动态设置img的高度和宽度以适应内容

pgpifvop  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(199)

动态调整图像大小以适合div容器的最佳方法是什么?
例如,我想有一个最大高度为50%,最大宽度为100%的父容器。然后我想在里面放一张图片。如果图片是横向的,并且在父容器的最大高度之内,它应该水平地伸展,但是要有它需要的高度。如果图片是纵向的,并且超过了父容器的最大高度,它应该停止在最大50%,并作为宽,因为它需要取决于照片的比例。

  • 谢谢-谢谢
    我尝试添加一个具有高度的父div:50%和宽度:100%,然后我添加了最大高度:100%和最大宽度:100%添加到子图像。对于高度超过50%的照片,效果很好,但是如果照片短于50%,div仍然会占用50%的空间,并在照片下面产生难看的空白。
rhfm7lfc

rhfm7lfc1#

由于你没有提供代码也没有html,我只能说你可以在图像的父级上使用object-fit: contain; css属性来包含图像而不损失纵横比。

相关问题