动态调整图像大小以适合div容器的最佳方法是什么?
例如,我想有一个最大高度为50%,最大宽度为100%的父容器。然后我想在里面放一张图片。如果图片是横向的,并且在父容器的最大高度之内,它应该水平地伸展,但是要有它需要的高度。如果图片是纵向的,并且超过了父容器的最大高度,它应该停止在最大50%,并作为宽,因为它需要取决于照片的比例。
- 谢谢-谢谢
我尝试添加一个具有高度的父div:50%和宽度:100%,然后我添加了最大高度:100%和最大宽度:100%添加到子图像。对于高度超过50%的照片,效果很好,但是如果照片短于50%,div仍然会占用50%的空间,并在照片下面产生难看的空白。
1条答案
按热度按时间rhfm7lfc1#
由于你没有提供代码也没有html,我只能说你可以在图像的父级上使用
object-fit: contain;
css属性来包含图像而不损失纵横比。