时间戳

首页 > 解决方案 > 当具有封面背景大小和绝对位置的背景图像停止调整大小时？

html - 当具有封面背景大小和绝对位置的背景图像停止调整大小时？

问题描述

让我们假设我们有一个图像设置为背景div。div有position: absolute。_ 图像处于background-size: cover模式。在这种情况下，背景图像将被调整大小。但在某些时候，在某个尺寸下，背景图像的宽度和高度将是相同的。

如何计算图像将停止调整大小的大小？

它与图像的宽度或高度以及容器没有直接关系。我找不到任何有关它的文档。

CSS

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

HTML

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

JSFiddle

https://jsfiddle.net/fbng74dm/

更新

一些示例值（近似值）：

标签： htmlcss

解决方案

如果一个人的宽度很大，则图像会被缩放，因此无法看到它的全部高度。容器的尺寸越小，适合容器的高度就越大。一旦可以看到全高，图像就不应再调整大小，因为它不会覆盖容器。

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

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;. 这就是为什么它保持高度并且只是从侧面突出的原因。

什么时候达到这个点？正如您在我的代码示例中已经看到的那样，一旦容器的纵横比变得小于背景图像的纵横比，就达到了这一点。原因很简单：没有其他可能。试试看，你将无法以不同的方式进行。这有简单的实际原因。

推荐阅读