我正在用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;
}

最佳答案

使用容器包装图像并将容器制成flex并隐藏overflow-x。这是您要找的吗?



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

<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>

关于css - 使用CSS裁剪DIV的溢出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39836033/

10-12 12:50
查看更多