我在 HTML 和 CSS 中创建了一行,其中包含许多具有特定高度和宽度的图像。在 Imgur 上可以看到我正在做的一个例子。
每个图像只是一个<img>浮动到左侧的标签以去除空白,总体而言,它可以成功运行。但是,当浏览器最小化时,由于没有足够的空间来显示它,最终图像会消失。在上面的 Imgur 链接中可以看到一个例子。
有没有办法在 CSS 中裁剪溢出,以便显示图像的裁剪版本(同时保持相同的高度)而不是没有图像?
更新:目前我的代码如下:
<div class="userbar">
<a href="#">
<img src="img.jpg" alt="Image">
</a>
... and so on, about 60 times
</div>
Run Code Online (Sandbox Code Playgroud)
CSS(用SASS编写然后编译):
.userbar {
max-height: 64px;
}
.userbar a {
float: left;
}
.userbar a img {
display: inline-block;
height: 64px;
width: 64px;
}
Run Code Online (Sandbox Code Playgroud)