在缩放窗口时使用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>

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

示例bannerimage： http://i.imgur.com/6zrWBD9.jpg

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

高度是固定的，在浏览器窗口缩放期间，两侧都被切断了相等的数量。我希望有人能帮助我解决这个问题。我不知道使用什么代码来调整大小，我希望它的方式。

提前致谢！

Answer 1

您可以使用CSS transform来对齐图片，并将overflow: hidden;添加到#images。例如：

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

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