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

【问题标题】：When background image with cover background-size, and position absolute stops resizing?当具有封面背景大小和绝对位置的背景图像停止调整大小时？
【发布时间】：2023-03-15 02:09:01
【问题描述】：

假设我们将图像设置为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/

更新

一些示例值（近似值）：

容器高度 976
容器停止在宽度 1540 处调整背景图像的大小

容器高度729
容器停止在宽度 1147 处调整背景图像的大小

容器高度 643
容器停止在宽度 1010 处调整背景图像的大小

背景图片高度2827
背景图片宽度4465

【问题讨论】：

当您在某个时候缩小（而不是放大）时，它会停止调整大小。在那之后，图像从右侧裁剪（您移动窗口以使其更小，并且图像不会调整大小，但会被裁剪）。

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

我刚刚计算了纵横比。就是这样。很好的答案。非常感谢！！！

【解决方案2】：

当屏幕达到一定宽度时，您可以使用@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 像素（即当窗口宽度为 600 像素或更小时）背景将为cover，最小宽度为 601 像素（即当窗口宽度为 601px 或更大时）背景将为auto。

【讨论】：

很抱歉，这不是我问题的答案。