具有屏幕外区域的CSS流体宽度居中图像

Question

你好。关于如何完成图表布局的任何想法？ 3幅宽度相等的图像，中间图像在视口中居中，最大宽度为1200像素。

其他两个侧面图像部分显示在屏幕上。

当浏览器窗口缩小到1200px以下时，中心图像会填满屏幕并按窗口宽度缩小。

只用CSS就可以实现这个目标！

谢谢！

Answer 1

您可以flex使用justify-content和max-width。

将:hover和shadow上的动画添加到示例中以显示行为

#layout {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
}

#layout img {
  min-width: 100%;
  max-width: 100%;
}


/* demo purpose */

#layout {
  border: solid;
  box-shadow: 0 0 0 50vw rgba(255, 255, 255, 0.5)
}

#layout img {
  position: relative;
  z-index: -1;
}

#layout:hover img:first-of-type {
  animation: slide 6s infinite steps(3);
}

@keyframes slide {
  from {
    margin-left: 200%;
  }
  to {
    margin-left: -400%;
  }
}

body {
  overflow-x: hidden
}

<div id="layout">
  <img src="http://lorempixel.com/600/200/food" />
  <img src="http://lorempixel.com/600/200/people" />
  <img src="http://lorempixel.com/600/200/fashion" />
</div>

Answer 2

经过一些实验，我找到了解决方案。关键是要意识到，在不到1200像素的情况下，侧面图像根本无法在屏幕上看到，因此可以完全隐藏 - 只需将中心图像设为100％。

所以将所有3张图像包裹在一个3600像素宽的绝对定位的容器中，并以50％左右为中心，边距为-1800px;

在1200像素及更低时，完全隐藏图像2和3并使容器相对定位在100％宽度。