Css 图像布局(可变宽度,每行等高)
我正在尝试创建一个网格布局,其中图像自动调整大小,使其高度相同,但宽度不同,以便均匀地适合一条线 目前我有: 但正如您所见,这并不能使图像正确匹配Css 图像布局(可变宽度,每行等高),css,image,flexbox,grid,Css,Image,Flexbox,Grid,我正在尝试创建一个网格布局,其中图像自动调整大小,使其高度相同,但宽度不同,以便均匀地适合一条线 目前我有: 但正如您所见,这并不能使图像正确匹配 <style> img { vertical-align: middle; max-width: 100%; } .masonry { display: flex; width: 100%; } .masonry--h { flex-flow: row wrap; } .masonry--h { margin
<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>
img{
垂直对齐:中间对齐;
最大宽度:100%;
}
.砖石{
显示器:flex;
宽度:100%;
}
.砌体——h{
柔性流:行换行;
}
.砌体——h{
左边距:-8px;
/*计数器复位:砖块*/
}
.砖石{
溢出:隐藏;
边界半径:5px;
保证金:0.08px 8px;
背景色:#333;
颜色:白色;
位置:相对位置;
}
.砖石:后{
位置:绝对位置;
最高:50%;
左:50%;
z指数:5000;
转换:翻译(-50%,-50%);
过渡:字体大小.25s,不透明度.25s易入易出;
字号:700;
不透明度:.5;
字号:1.25em;
}
.砖石:悬停:之后{
字号:2.25em;
不透明度:1;
}
.img{
对象匹配:覆盖;
宽度:100%;
最大宽度:300px;
}
我正在尝试做一些像下面的照片,但我不知道怎么做