jquery - Css 背景大小 100% 检测高度改变负绝对位置

Question

我已阻止 17% 的窗口宽度用于响应。这个 block 有 :after 以图像为背景。 :after 具有图像高度和图像高度值的绝对负位置 - 所以它固定为 ex。 82px。

我将 background-size 设置为 100%，当我调整浏览器 block 17% 的大小时，宽度也会发生变化，背景也会发生变化，但绝对负位置和 :after 高度不会改变。

图像 81 x 320

问题:如何获取调整到 block 宽度的背景图像的高度，并将变化的高度设置为绝对负位置？

.side {
  width: 17%;
  height: 100px;
  background: #000;
  margin-top: 100px;
}
.side:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 82px;
  left: 0;
  top: -82px;
  background: url(/img/left-bar-blue-01.png) no-repeat;
  background-position: 50% 50%;
  background-size: 100%;
}

<div class="side">

</div>

Answer 1

您似乎希望 :after-Element 始终位于相同的相对位置 – 对吗？如果是这样，你应该看看这个 article about Centering Percentage Width/Height Elements .

在过去，使用负值 margin 或 top 是一种常见的方法。现在你可以/应该这样做:

.side:before {
/* 其他 CSS 属性 */
变换:翻译Y(-100%)；
}


这取决于您的特殊情况，老实说我并不完全理解。