Question

我想要的是我的图像应该位于屏幕外部，当它足够大以适应整页时。在中心，我有一个宽度为1200px的容器，当我调整左边和右边的背景图像时，不应该与中心div重叠。

我得到了它的工作，但我无法完成的是背景图像应该溢出的方向，左图像应该向左溢出而不是右边的大小调整，右图像应该向右溢出不可见。我在这里创建了一个显示问题的jsfiddle。

我有一个父母，左边应该包含左图像，右边应该包含正确的图像。分隔符的大小与它不应重叠的空间大小相同。

<div class="parent">
    <div class="side left"></div>
    <div class="divider"></div>
    <div class="side right"></div>
</div>

这就是我想要的，但是当我调整大小并且图像不再适合宽度div时，我想要的是当我将左图像放在右边，而右边的图像放在左边时我会得到的行为。 / p>

大屏幕上的预期结果：

https://www.dropbox.com/s/e40hzngum938axs/Screenshot%202014-11-10%2011.47.31.png

较小屏幕上的预期结果：

https://www.dropbox.com/s/1fdvdyqkxew9ozl/Screenshot%202014-11-10%2011.50.43.png

我尝试了几件事，包括浮点数，img标签，溢出属性，但我似乎无法找到有效的解决方案。我可以单独用css解决这个问题，还是应该从左到右切换背景位置，反之亦然？

Answer 1

您可以使用媒体查询根据屏幕宽度更改背景位置。在以下示例中，假设图像宽度为560px，中间列宽度为100px：

＆＃13;

body { margin: 0; padding: 0; }
.parent { display: table; width: 100%; min-width: 300px; }
.parent div { display: table-cell; height: 700px; }
.divider { width: 100px; }
.side:first-child { background: url("http://i.stack.imgur.com/Ry434.png") red no-repeat top left; }
.side:last-child { background: url("http://i.stack.imgur.com/lIVja.png") red no-repeat top right; }
@media screen and (max-width: 1219px) {
  /* screen is narrower than 560 + 100 + 560 means there is not enough room for the image */
  .side:first-child { background-position: top right; }
  .side:last-child { background-position: top left; }
}

＆＃13;

<div class="parent">
  <div class="side"></div>
  <div class="divider"></div>
  <div class="side"></div>
</div>

＆＃13;

另一种解决方案是始终将图像居中对齐。在这种情况下，您需要确保图像足够宽以覆盖大屏幕尺寸，并且重要位位于图像的水平中心。您还需要设置最小宽度，以便图像的足够部分完全可见：

＆＃13;

body { margin: 0; padding: 0; }
 /* 2 x 300px min. image width + 100px fixed content width = 700px */
.parent { display: table; width: 100%; min-width: 700px; }
.parent div { display: table-cell; height: 700px; }
.divider { width: 100px; }
.side:first-child { background: url("http://i.stack.imgur.com/Ry434.png") red no-repeat top center; }
.side:last-child { background: url("http://i.stack.imgur.com/lIVja.png") red no-repeat top center; }

＆＃13;

<div class="parent">
  <div class="side"></div>
  <div class="divider"></div>
  <div class="side"></div>
</div>

＆＃13;

三列布局，左右两个浮子和一个固定宽度中心

1 个答案: