时间戳

首页 > 解决方案 > CSS - 如何在一个容器中显示 3 个相同大小的图像，但故意切断两侧的图像

css - CSS - 如何在一个容器中显示 3 个相同大小的图像，但故意切断两侧的图像

问题描述

我试图在示例中实现下面的效果，以便将不在中间的两个图像故意切断，以便在浏览器较小时，用户将真正看到完整的图像。我在这个 css 上尝试了无穷无尽的变化：

width: 100%;
    height: auto;
    max-width: 670px;
    overflow: hidden;
    position: absolute;

似乎无处可去 在此处输入图像描述

标签： csspositionoverflow

解决方案

只需使用 display: flex; 对于容器并将所有图像对齐在中间。

.wrapper {
  display: flex;
  justify-content: center;
}

您可以在此处查看并测试此示例：https ://codepen.io/bIropka/pen/WNramag

推荐阅读