使用 CSS 使两个背景图像与 div 一起响应

Question

我正在努力让 2 个背景图像彼此同步缩小，因此我的座位计划适用于手机/平板电脑。

我尝试过背景覆盖、包含、100% 并将其他 div 值设置为 100%，但将这些座位保持在原位并不令人高兴。

因此，对于低于 650 像素的座位图，不仅背景图片需要缩小，而且座位图也需要缩小 - 它们需要保持其在座位图上的位置。包含的 div 当前设置为 15px 以显示座位图像。

这是我正在使用的原始静态宽度代码 https://jsfiddle.net/kjyopdL8/

座位尺寸应为 15 像素，直到座位图低于 650 像素，然后座位图像与主座位图图像同步缩小，同时保持相同的位置和比例

#theatre {
  width: 650px;
  float: left;
  padding-right: 5px;
  margin: 25px 15px 0 10px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

#bmessage {
  padding: 1px 3px;
  height: 20px;
  font-size: 14px;
  background: #ddf;
  color: #080;
  font-weight: bold;
}
#seats:before {
  content: url('http://i.imgur.com/qn56yss.gif');
}

#seats {
  margin: 10px 0;
  padding: 10px 0;
  position: relative;
}

#seats div {
  position: absolute;
  width:15px;
  height:15px;
}

#seats .s1.std.grey {
  background: url('https://s3.postimg.org/g9dq32nqr/1_1_2.png') no-repeat center top;
}

<div id="theatre">
  <div class="container">
    <div id="bmessage">Select the seats that you need.</div>
    <div id="seats">
      <div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>       
      <div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div>
      <div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>       
      <div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"></div>
    </div>
  </div>

Answer 1

Ethan Marcotte 撰写了大量有关响应式背景图像的文章。 你可以在他的博客或here.阅读很多。

你基本上想为你的背景图片设置以下属性：

1. 将#image 元素的显示属性设置为inline-block。如果没有此属性，CSS 会将 <span> 元素显示为内联元素，我们将无法为其指定宽度或（在一分钟内）高度。
2. 将该元素的宽度设置为 100%，以便我们的图像填充包含 <div>。
3. 将 font-size 和 line-height 属性设置为 0，这样 span 中的任何内容都不会影响其大小。
4. 将vertical-align 属性设置为middle 以使包含<div> 中的图像元素垂直居中。 将 background-size 属性设置为 100%，以便我们的图像填充图像元素。
5. 将 background-position 属性设置为 50% 50% 以在图像元素中对齐背景图像。
6. 将 background-repeat 属性设置为 no-repeat 以防止浏览器水平或垂直平铺图像。

如果您对覆盖的图像和下面的图像采用这种方法并且它们的大小相同，那么您应该没有对齐问题。

媒体查询将帮助您处理不同的屏幕尺寸。

Answer 2

你的 CSS 有很多错误。如果您希望容器响应，请不要在容器上提供固定宽度。我编辑了你的小提琴并想出了这个：https://jsfiddle.net/kjyopdL8/4/

#seats:before {
    content: '';
    display: block;
    padding: 50%;
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
    background-image: url(http://i.imgur.com/qn56yss.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

看看之前的伪选择器。它成功了！