css 背景图不拉伸自适应屏幕大小

时间 2019-11-11

标签 css 背景拉伸自适应屏幕大小栏目 CSS 繁體版

原文原文链接

效果图 css

全屏： html

背景图尺寸大于屏幕尺寸，背景图只显示跟屏幕同样大小内容 api

小屏时：浏览器

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

background-position:

属性来进行控制，它的部分可选参数值以下： url

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

下面贴上代码 code

主要html代码： htm

<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定位，已经脱离了文档流，若是有其余元素使用相对定位或者绝对定位会不会受到影响，我还没测试到。若是有更好的方法能够实现图片自适应屏幕的功能，请你们多多指教。