Sail


手在键盘敲很轻


图片的响应式处理

在这个暑假,有若干次需要对图片进行响应式处理,本文记录下我总结的方法,仅供参考。


这里我直接将图片作为整个页面的背景图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html,body{
margin: 0;
padding: 0;
position: relative;
background: url("./background.jpg")no-repeat;
width: 100%;
height: 100%;
max-width: 100%;
background-position-x:50%;
}

@media screen and (min-width: 1000px){
html,body{
background-size: 100%;
background-position-x:left;
width: 100vw;
height: 100vh;
overflow: hidden;
}
}
© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬