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

Question

我正在努力让 2 张背景图片彼此同步缩小，所以我的座位计划将适用于 mobile/tablets。

我尝试了背景覆盖、包含、100% 并将其他 div 值设置为 100%，但我对将这些座位保持在适当位置并不满意。

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

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

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

#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..

上阅读很多内容

您主要想为背景图片设置以下属性：

将#image 元素的显示属性设置为内联块。如果没有这个属性，CSS 会将 <span> 元素显示为内联元素，我们将无法为其指定宽度或（稍后）高度。
将该元素的宽度设置为 100%，以便我们的图像填充包含 <div>。
将字体大小和行高属性设置为 0，这样跨度内的任何内容都不会影响其大小。
将垂直对齐属性设置为中间，使图像元素在包含 <div> 中垂直居中。将背景大小属性设置为 100%，以便我们的图像填充图像元素。
将背景位置属性设置为 50% 50% 以在图像元素内对齐背景图像。
将背景重复属性设置为不重复以防止浏览器水平或垂直平铺图像。

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

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

Answer 2

您的 css 上有很多错误。如果您希望它具有响应性，请不要在您的容器上提供固定宽度。我编辑了你的 fiddle 并想出了这个：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;
}

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

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

Make two background images responsive alongside divs with CSS

html

css

background-image

media-queries

responsive-design