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