html - 使用 CSS 在缩放窗口时切断图像的左侧和右侧

Question

我目前有以下图像列表:

<div id='images'>
        <img src="images/placeholders/ph.jpeg" alt="Content missing"/>
        <img src="images/placeholders/ph1.jpg" alt="Content missing"/>
        <img src="images/placeholders/ph2.jpg" alt="Content missing"/>
        <img src="images/placeholders/ph3.jpg" alt="Content missing"/>
    </div>

这些图像循环并放置在彼此之上，淡入淡出。图像具有固定高度，但宽度可变。此宽度在左侧和右侧是可变的。

示例横幅图像: http://i.imgur.com/6zrWBD9.jpg

缩放浏览器窗口后我想要的是: http://i.imgur.com/figgCuJ.jpg

高度是固定的，在浏览器窗口缩放时两边等量切除。我希望有人可以帮助我解决这个问题。我不知道使用什么代码来按照我想要的方式调整它的大小。

提前致谢!

Answer 1

您可以使用 CSS transform 对齐图像，并在 #images 中添加 overflow: hidden;。示例:

#images {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#images img {
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}