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

Posted 2023-03-06

【中文标题】使用 CSS 使两个背景图像与 div 一起响应

【英文标题】：Make two background images responsive alongside divs with CSS

【发布时间】：2017-03-09 22:50:18

【问题描述】：

我正在努力让 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>

【参考方案1】：

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

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

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

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

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

【讨论】：

里面有很多东西，你可以试试 JSFiddle 吗？我没有高兴地将这些属性添加到背景 url 选择器中。 jsfiddle.net/f3nr70yh

【参考方案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;

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

【讨论】：

这看起来不错，谢谢，50% :"before" 填充的目的是什么？

“剧院” div 上没有 CSS，座位尺寸不应该缩小吗？ （它们保持在 15 像素）

基本上，它在右上角和左上角为整个容器提供 50% 的填充。无论窗口宽度是多少，它都会得到 50% 的宽度，这就是它缩小的原因。我更新了小提琴。我在座位 div 中使用 % 而不是 px。它现在应该相应地调整大小。

座位尺寸应为 15 像素，直到座位图低于 650 像素（参见原始的#theatre div），然后与座位图同步缩小。它看起来不错，但 atm 座位图像太小了。