Question

我是初学者。我有一个带标题（有背景图片）和徽标的简单页面。

我有两个问题

如果＆lt; 768px
如何根据视口大小调整背景图像的大小？

这是我的代码

<div class="container">
  <div class="row">
   <div class="col-md-12">
  <header>
     <img src="images/logo.png" alt="" />
   </header>
   </div>
  </div>
</div>

CSS

body header {
  position: relative;
  width: 940px;
  height: 200px;
  background: url(../images/header-bgr.png) no-repeat;
}
body header img {
  position: absolute;
  top: 2px;
  right: 2px;
}

Answer 1

像这样使用：

用于隐藏标题标记的背景图像并使徽标居中： CSS：

@media (max-width: 767px) {

body header {
  position: relative;
  width: 940px;
  height: 200px;
  background: none;
  margin:0 auto;
}
body header img {
  position: absolute;
  top: 2px;
  right: 2px;
  display: none;
}

}

尝试background-size:contain;调整图片大小

body header {
  position: relative;
  width: 940px;
  height: 200px;
  background: url(../images/header-bgr.png) no-repeat;
  background-size:contain;
}

Answer 2

如果您使用实际代码提供jsfiddle或codepen，则总是更清楚。

如果您已经有一个容器类，那么您不必定义另一个具有静态宽度的标头。它可以是100％，也可以在标题上使用容器类。您的结构基本上可以简化为这种形式。

HTML：

<header class="container">
  <figure>
    <img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" class="img-responsive" alt="logo">
  </figure>
</header>

CSS：

* {
  box-sizing: border-box;
}

header {
  width: 100%;
  background: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
  height: 200px;
  border-bottom: 1px solid #999;
  position: relative;
  padding: 30px 0;


  figure {
    max-width: 200px;
    margin: 0px auto; 
    position: relative;
  }

  @media (max-width: 768px) {
    & {
      background: none;
      min-height: auto;

      figure {
        img {
          margin-top: 00%;
        }
      }
    }
  }
}

http://codepen.io/gorkhali/pen/azjVev

根据视口大小调整背景图像的大小

2 个答案: