Question

我在HTML和CSS中创建了一个包含特定高度和宽度的图像的行。我可以看到我正在做的一个例子here on Imgur。

每个图像只是一个浮动到左侧的<img>标记，用于删除空格，整体而言，它可以成功运行。但是，当浏览器最小化时，由于没有足够的空间来显示，最终图像会消失。在上面的Imgur链接中可以看到这方面的一个例子。

在CSS中，有没有办法裁剪溢出，以便显示图像的裁剪版本（同时保持相同的高度）而不是图像？

更新：我的代码目前如下：

<div class="userbar">
    <a href="#">
        <img src="img.jpg" alt="Image">
    </a>
    ... and so on, about 60 times
</div>

CSS（用SASS编写然后编译）：

.userbar {
    max-height: 64px;
}

.userbar a {
    float: left;
}

.userbar a img {
    display: inline-block;
    height: 64px;
    width: 64px;
}

Answer 1

使用容器包装图像并制作容器flex并隐藏overflow-x。这是你要找的吗？

＆＃13;

.image-container {
  width: 100%;
  display: flex;
  overflow-x: hidden;
}

＆＃13;

<div class="image-container">
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
  <img src="https://unsplash.it/200/200/?random" />
</div>

＆＃13;

使用CSS裁剪DIV的溢出

1 个答案: