css - 图像布局(可变宽度,每行等高)
问题描述
我正在尝试创建一个网格布局,其中图像自动调整为相同的高度但不同的宽度以均匀地适合一条线。
目前我有这个:
但是正如您所看到的,这并不能使图像正确匹配。
<style>
img {
vertical-align: middle;
max-width: 100%;
}
.masonry {
display: flex;
width: 100%;
}
.masonry--h {
flex-flow: row wrap;
}
.masonry--h {
margin-left: -8px;
/* counter-reset: brick;*/
}
.masonry-brick {
overflow: hidden;
border-radius: 5px;
margin: 0 0 8px 8px;
background-color: #333;
color: white;
position: relative;
}
.masonry-brick:after {
position: absolute;
top: 50%;
left: 50%;
z-index: 5000;
transform: translate(-50%, -50%);
transition: font-size .25s, opacity .25s ease-in-out;
font-weight: 700;
opacity: .5;
font-size: 1.25em;
}
.masonry-brick:hover:after {
font-size: 2.25em;
opacity: 1;
}
.masonry-img {
object-fit: cover;
width: 100%;
max-width: 300px;
}
</style>
我正在尝试制作如下图所示的东西,但我不知道如何制作。
解决方案
推荐阅读
- python - 在两个数据帧之间进行推断(舍入问题)
- python - 结合年、月、周数和迄今为止的日期
- swift - 我的 swift 框架中是否需要“frameworkName.h”标头?
- c++ - 将 quickfix c++ 交叉编译到 arm 架构中时出错
- delphi-7 - 如何使用 OleVariant 在方法中发送字节数组
- java - Spring Java Format + IntelliJ + 链式方法调用包装
- google-maps - 链接到具有完整地址的谷歌地图方向作为目的地参数丢弃目的地
- javascript - 如何在我的应用程序后台每 X 秒记录一次控制台日志?
- python - 在 Alembic 迁移升级期间是否可以连接到另一个数据库?
- regex - 在 PostgreSQL 中匹配部分反向引用