欢迎光临
我们一直在努力

用background-size做响应式布局背景图

现在响应式布局越来越流行,但是网站的logo一般是用的 background(背景图片) 属性实现,而不是直接在页面使用img标签。如果使用背景,在css2里面宽高是固定的值,那么这就不适合响应式布局了,网站百度一下搜到 css3里面新增了 background-size,可以实现自适应div的宽高改变背景图片的大小。

/*只要这样就对了*/
background-size:contain;

/*W3c标准*/

background-size允许的值

auto:原始图片大小

number:数值

percentage:百分比

cover:放大铺满

contain:缩小铺满

(主要用到这个)

实际使用场景

.header .m-logo a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
line-height: 100em;
}
/* 设置div宽度 让背景图缩小铺满div */
@media (max-width: 720px){
  .header .m-logo {
  background-size: contain;
  width: 107px;
  }
}

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 用background-size做响应式布局背景图

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址