css 背景图不拉伸自适应屏幕大小
css 背景图不拉伸自适应屏幕大小
xiaoxin502 发表于2年前
css 背景图不拉伸自适应屏幕大小
  • 发表于 2年前
  • 阅读 3131
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: css 背景图不拉伸,显示部分内容,自适应屏幕大小

效果图

全屏:

背景图尺寸大于屏幕尺寸,背景图只显示跟屏幕一样大小内容

小屏时:

如效果图所示,图片并没有发生压缩、或者缩小比例,它只是显示跟屏幕尺寸大小的内容,至于如何控制缩小浏览器时图片的变化,可以使用css的

background-position:

属性来进行控制,它的部分可选参数值如下:

详细参数可自行查看api文档。

下面贴上代码

主要html代码:

<body>
        <div style="
             background: url('img/failure.jpg') no-repeat center center;
             width: 100%;
             height: 100%;
             position: fixed;
">
        </div>
</body>

使用position:fixed之后就可以通过设置width和height来控制div的宽高度了。

background: url('img/failure.jpg') no-repeat center center;
后面的no-repeat 表明图片文件不重复平铺,后面的center center表示当屏幕缩小时,图片在水平方向和垂直方向都居中显示。

页面的其他内容就可以全部都写在上面的div中了,不过这代码有些问题,因为最外层div已经使用了fix定位,已经脱离了文档流,如果有其他元素使用相对定位或者绝对定位会不会受到影响,我还没测试到。如果有更好的方法可以实现图片自适应屏幕的功能,请大家多多指教。




共有 人打赏支持
粉丝 0
博文 4
码字总数 1730
×
xiaoxin502
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: