计算 `background-size` 的断点属性

Question

我有一个以大图像作为背景的居中视口。由于页面上的其他元素，我们选择根据这些其他元素的大小设置一些断点。到目前为止一切顺利，我的布局工作正常。

一个问题是，由于使用的图像不够高，一旦达到一定大小，背景颜色就会显示出来，并且两边都会引入条形。这与图像的比例与视口的比例有关。

酒吧解决方案：

http://output.jsbin.com/vecele

现在，这里的解决方法是找出在什么时候引入了柱状图。任何大于该大小的值，直到截止值都意味着 background-size 需要更改为 background-size: 100% auto; 与之前设置为 background-size: auto 100%;

相比固定解决方案：

http://output.jsbin.com/fonozagova/

现在我的问题是如何从数学上计算出“幻数”截止值？在我的示例中，我只是使用 window 大小来找到我应该在这里使用的实际数字，这确实不是最优的。

Answer 1

为什么不将背景大小设置为 cover？无论大小如何，它都会按比例缩放背景图像以填充容器。

div.container {
  background-size: cover;
}

Answer 2

您可以使用带有 % 垂直填充的伪元素，它将使用元素宽度作为参考。无论宽度更新如何，比率都将保持不变：

.hero {
  background-color: #0a6ba1;
}

#header {  
  background-image: url('https://suretybonds.com/img/bonds/giant-header/inspector-1800.png');
   background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  margin: 0 auto 40px;
  max-width: 1600px;
  position: relative; 
}
#header:before {
  content:'';
  display:inline-block;
   padding: 26% 0 0;
}

@media screen and (min-width: 699px) and (max-width: 1465px) {
  #header {

  } 
}

@media screen and (min-width: 0) and (max-width: 699px) {
  #header {
 

  } 
}

@media screen and (min-width: 0) and (max-width: 500px) {
  #header {

  } 
}

/* extra for demo */
#header  {
  text-align:center;
  font-size:4vw;
  }
#header:before {
  vertical-align:middle;
    }

  <div id="header" class="hero">resize window's width</div>

http://jsbin.com/lafosakeke/1/edit?output

计算 `background-size` 的断点属性

Calculating Breakpoints of `background-size` Property

html

css

responsive-design

计算 `background-size` 的断点 属性

Calculating Breakpoints of `background-size` Property

html

css

responsive-design

计算 `background-size` 的断点属性