div设置背景图片自适应

div设置背景图片,不重复不变形,还可根据不同屏幕的宽度,自适应高度

效果:
宽度变窄,高度相应比例变窄
div设置背景图片自适应_第1张图片
宽度变宽,高度相应比例变宽

高度与宽度无法直接自适应,需要找一个中间的属性相串联。
宽度的自适应是根据viewport的width来调整的。
padding
padding是根据viewport的width来调整的。
padding-top和padding-bottom也是根据viewport的width来跳转的。

那么我们可以通过 padding-bottom属性来间接和width进行自适应。
padding-bottom的值 = (图片高/图片宽)
假设 图片像素为1920*1080,则padding-bottom值 = (1080/1920) = 56.25%

代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="backgroundImg">

    div>
body>
<style>
    body{
        margin: 0;/*去除div和body之间的间隔*/
    }
    #backgroundImg{
        width: 100%;
        background: url("pc.jpg") no-repeat;/*no-repeat:背景图将不会被重复*/
        background-size: cover;/*背景图片放大到适合元素容器的尺寸,图片比例不变.背景图像的某些部分可能无法显示在背景定位区域中。*/
        padding-bottom: 56.24%;/*起到的效果是让宽度与高度关联,具体数值=(图片高/图片宽)*/
        /*图片分辨率为1202*676 约为56.24%*/
    }
style>
html>

你可能感兴趣的:(前端,html,css,css3,html5)