全宽响应div显示两个图像

Question

我正在尝试将大图像始终居中并与屏幕/浏览器窗口一样宽。

我几乎可以使用它，但现在有一个较小版本的图像渲染：

无论缩放或窗口大小如何，右侧的图像都显示为全屏。左边的那个不应该b

.wrapper{
	background: url('http://trendpie.com/wp-content/uploads/2014/05/4843-8.jpg') no-repeat   center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

    <header>
      <div class="wrapper">
          <img src="http://trendpie.com/wp-content/uploads/2014/05/4843-8.jpg" alt="Responsive image">
      </div>
    </header>

我意识到图像源是在两个地方定义的，但如果我从HTML中删除它，我会得到以下结果：

Answer 1

内嵌图像当前正在设置包装器的高度并使其不会崩溃。如果您明确设置高度（或使用像padding-top这样的东西），您可以获得所需的结果，而无需同时声明两者。

.wrapper{
	background: url('http://trendpie.com/wp-content/uploads/2014/05/4843-8.jpg') no-repeat   center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  
    height: 500px; /* or something like padding-top: 60% if you want a responsive ratiobox */
}

<header>
      <div class="wrapper" role="img" aria-label="Banner Image"></div>
</header>