当背景图像具有封面背景大小,且位置绝对停止调整大小时?

如果一个人有一个大的宽度,图像被缩放,因此你看不到它的全部高度。越是减小容器的大小,适合容器的高度就越大。一旦可以看到整个高度,图像就不应该再调整大小了,因为这样它就不会覆盖容器了。

为什么?让我们来看一个不停止调整背景图像大小的示例:

var aspectRatio = 1920 / 1280;
var bg = document.getElementsByClassName('bg')[0];
window.addEventListener('resize', resizeListener);

function resizeListener() {
	if (bg.offsetWidth / bg.offsetHeight <= aspectRatio) {
  	bg.className = 'bg small';
  } else {
  	bg.className = 'bg';
  }
}

* {
  margin: 0;
  padding: 0;
}

.bg {
  background-image: url("http://www.adweek.com/wp-content/uploads/files/blogs/istock-unfinished-business-hed-2015.jpg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
}

.small {
  background-size: contain;
}

<div class="bg">
</div>

试穿一下 JSFiddle !

你看,背景图像不再覆盖整个背景,但我们已经设置了 background-size: cover; . 这就是为什么它保持高度,只是从侧面突出的原因。

什么时候到了这一点?正如您在我的代码示例中已经看到的,一旦容器的纵横比小于背景图像的纵横比,就会到达该点。原因是微不足道的:没有其他可能性。尝试一下,你将无法以不同的方式进行。有一些简单的实际原因。

你可以用 @media 使后台大小停止的查询 cover 当屏幕达到一定宽度时。例如:

.bg {
  background-image: url("http://www.adweek.com/wp-content/uploads/files/blogs/istock-unfinished-business-hed-2015.jpg");
  width:100%;
  height:100%;
  position:absolute;
}
@media(max-width: 600px){
  .bg{
    background-size:cover;
    background-repeat:no-repeat;
  }
}
@media(min-width: 601px){
  .bg{
     background-size:auto;
   }
}

这意味着 最大宽度为600像素 (即当窗口宽度小于等于600px时)背景将为 盖 和 最小宽度为601px (即当窗口宽度为601px或更大时)背景将为 auto .