解决设置 vw、vh 导致图片拉伸问题的指南
使用 vw 和 vh 单位进行页面布局时,图片拉伸问题时有发生。本文介绍了两种有效的解决方法。
使用 object-fit
object-fit 属性指定了图片的缩放方式,使其在容器中保持其纵横比。对于拉伸问题,我们可以使用 cover 值,它会将图片拉伸以覆盖整个容器,同时保持纵横比。
img { width: 100vw; height: 100vh; object-fit: cover; }登录后复制
使用背景图片
另一种方法是将图片用作容器的背景图像并使用 background-size 属性进行缩放。同样,我们使用 cover 值以保持图片的纵横比。
div { width: 100vw; height: 100vh; background-image: url('your-image.jpg'); background-size: cover; background-position: center; }登录后复制
本文采摘于网络,不代表本站立场,转载联系作者并注明出处:https://www.iotsj.com//kuaixun/6572.html