时间戳

首页 > 解决方案 > 响应高度，基于背景大小

css - 响应高度，基于背景大小

问题描述

我需要我的背景图片做出响应。我用过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>

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

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

我怎样才能解决这个问题？

https://jsfiddle.net/mt386Ln0/

标签： cssimage-resizing

解决方案

有一个不使用 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>

推荐阅读