关于pc端背景图适配

最新推荐文章于 2024-08-27 16:31:14 发布

周游tel

最新推荐文章于 2024-08-27 16:31:14 发布

阅读量335

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_70266568/article/details/130844307

版权

要求：背景图在各种缩放情况下不失真，

我这里Viewlogin 是登陆页面的外部盒子先设置宽高100% 以便于盒子大小与当前界面保持一致 min-width 设置盒子的最小宽度 1200px 当页面缩至低于1200px时页面也不再改变 min-width max-height 本质上就是为了规定元素在达到某种临界值时也不再发生改变给图片设置绝对定位，脱离了文档流不在占据空间它会去找附近设置了相对定位或者绝对定位的盒子如果没有则会以body为参照，object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。指定背景图去适应容器。