响应高度，基于背景大小

Question

我需要我的背景图片能够响应。我已经使用了 background-size: contain，这似乎工作正常，但我需要 div 的高度也能响应。

.container {
  width: 100%;
}
.bg {
  background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center top;
  background-size: contain;
  height: 600px;
}

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

目前高度为 600px，根据屏幕宽度，您会看到红色背景，这不应该是这种情况。

我试过background: cover，但它会缩放图像。它应该是 div 的 100%，但不应被削减。

我该如何解决这个问题？

https://jsfiddle.net/mt386Ln0/

Answer 1

我没有使用 background-size: contain，而是使用了 background-size: auto，这似乎符合您的要求。此外，我添加了一些 javascript 来帮助调整大小。

window.resize = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
a.style.width = "100%";
b.backgroundSize = "auto";
}

.container {
  width: 100%;
}
.bg {
  background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center;
  background-size: auto;
  height: 600px;
}

<div class="container" id = "a">
  <div class="bg" id = "b"></div>
</div>

Answer 2

你试过了吗：

background-size: cover

这将使背景始终覆盖 DIV - 您可能需要调整 -

background-position: xxxxx

因为有时您查看图像的屏幕尺寸将意味着设置一个 @meda 查询以使其适合每个不同的欺骗（即移动或桌面）

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 3

如果你知道图像的比例，你可以考虑填充技巧：

.container {
  width: 100%;
}

.bg {
  background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') center/100%;
}

.bg:before {
  content: "";
  display: inline-block;
  padding-top: calc((628/960) * 100%); /* OR 65.42% */
  vertical-align: top;
}

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

Answer 4

有一个不使用 JavaScript 的简单解决方案。只需在容器内以特定比例添加 <svg>。

您必须使用图像尺寸作为 viewBox <svg viewBox="0 0 960 628"></svg>

示例：

div{
  background-image:url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg');
  background-size:cover;
  background-position:50%;
  background-repeat:no-repeat;
}
svg{
  width:100%;
  display:block;
  visibility:hidden;
}


.demo-1{width:100%}
.demo-2{width:40%}

<div class="demo-1">
  <svg viewBox="0 0 960 628"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 960 628"></svg>
</div>

响应高度，基于背景大小

Responsive height, based by background size

css

image-resizing