CSS-如何在一个容器中显示3个相同大小的图像，但有意将侧面的图像切掉 我试图在例子中实现下面的效果，以便两个中间的图像不被故意切断，这样当浏览器更小时，用户将真正看到完整的图像。我已经尝试了这个css的无限变化： width: 100%; height: auto; max-width: 670px; overflow: hidden; position: absolute;

而且似乎一事无成

---

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

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

---

您可以在这里查看并测试这个示例：

因此我使用了

flexbox

将它们放在同一行上。 新增

溢出：隐藏

到

.image wrapper

，这样图像就可以溢出而不需要滚动条

在第一个

.image包装器上

我添加了

方向：rtl所以它在左边而不是右边开箱即用

.container .image-wrapper:nth-of-type(2n) {
   min-width: max-content;
}

这是为了确保中间包装始终是完整的图像大小


.container{
显示器：flex；
}
.container.image包装器{
填充物：5px；
溢出：隐藏；
最小高度：最大含量；
位置：相对位置；
}
.container.image包装器：类型的第一个{
方向：rtl；
}
.container.image包装器：类型的第n个（2n）{
最小宽度：最大含量；
}

您能提供html吗？仅用于所讨论的示例。试图复制它，但没有效果@RichStevens从站点复制代码有问题吗？这将在较小的屏幕上创建一个滚动条。这与本案例无关。但是如果你不需要滚动条：宽度：100%；溢出：隐藏；