CSS3属性background-size做响应式布局背景图

PHPABC CSS 1,298 次浏览 , 没有评论

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

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

background-size 参数

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;
  }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go