代码之家 › 专栏 › 技术社区 › Arkadiusz KaÅkus

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

css html

Arkadiusz KaÅkus · 技术社区 · 6 年前

假设我们有一个图像作为 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>

J小提琴

https://jsfiddle.net/fbng74dm/

更新

一些示例值(近似值):

集装箱高度976
容器停止调整背景图像的宽度1540

集装箱高度729
容器停止以1147宽度调整背景图像的大小

集装箱高度643
容器停止调整背景图像的宽度1010

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

2 回复 | 直到 6 年前

Anonymous 6 年前

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

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

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

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

RobertAKARobin 6 年前

你可以用 @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 .