Question

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

我尝试了背景封面，包含，100％并将其他div值设置为100％，但保持这些座位就位没有乐趣。

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

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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

Ethan Marcotte撰写了大量关于响应式背景图片的文章。您可以在他的博客或here.上阅读。

您基本上想要为您的背景图像设置以下属性：

将#image元素的display属性设置为inline-block。如果没有此属性，CSS会将git branch --orphan元素显示为内联，我们将无法为其指定宽度或（在一分钟内）高度。
将该元素的宽度设置为100％，以便我们的图片填充包含<span>。
将font-size和line-height属性设置为0，以便跨距内的任何内容都不会影响其大小。
将vertical-align属性设置为中间，使图像元素在包含<div>中垂直居中。将background-size属性设置为100％，以便我们的图像填充图像元素。
将background-position属性设置为50％50％以对齐图像元素中的背景图像。
将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;
}

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

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

2 个答案: