不使用object-fit: cover的CSS图像网格
创始人
2024-12-29 04:30:15
0次
以下是一个不使用object-fit: cover的CSS图像网格的解决方法示例：
HTML代码：
CSS代码：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.grid-item {
position: relative;
overflow: hidden;
padding-bottom: 100%; /*设置项目高度为宽度的百分比*/
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /*保持图片比例并填充整个区域*/
}
上述代码中，我们使用了CSS Grid来创建一个网格布局。每个图像都包装在一个具有 这样，即使图像的大小不一致，它们也会按照网格布局进行排列，并保持相同的宽高比。.grid-item类的元素中。通过设置
position: relative和overflow: hidden，我们将每个图像容器设置为一个固定的宽高比。在这个示例中，我们设置了一个1:1的宽高比，即正方形。然后，我们将图像设置为绝对定位，并使用object-fit: cover将图像保持比例并填充整个容器。
相关内容
热门资讯
9分钟攻略！边锋老友棋牌脚本，...
9分钟攻略！边锋老友棋牌脚本，云扑克辅助器（详细透视辅助挂教程）；超受欢迎的边锋老友棋牌脚本稳赢小游...
4分钟规律！白金岛游戏有猫腻吗...
4分钟规律！白金岛游戏有猫腻吗，wepoke德州扑克系统规律（详细透视辅助神器教程）1、玩家可以在白...
1分钟了解！友友邳州麻将神器，...
1分钟了解！友友邳州麻将神器，wpk发牌规律算法（详细透视辅助助手教程）；友友邳州麻将神器简单的灵活...
九分钟透明！青龙大厅免费辅助器...
《九分钟透明！青龙大厅免费辅助器，wpk德州（详细透视辅助神器教程）》 青龙大厅免费辅助器软件透明挂...
9分钟总结！天天麻将川南版花麻...
9分钟总结！天天麻将川南版花麻将有挂吗，wopoker轻量版外 挂（详细透视辅助助手教程）；是一款可...
7分钟详情！皮皮跑胡子有辅助吗...
7分钟详情！皮皮跑胡子有辅助吗，poker world外 挂（详细透视辅助插件教程）是一款可以让一直...
7分钟教学！边锋有后台操控吗，...
您好，边锋有后台操控吗这款游戏可以开挂的，确实是有挂的，需要了解加微【136704302】很多玩家在...
三分钟透明！越乡游辅助工具，红...
三分钟透明！越乡游辅助工具，红龙扑克模拟器（详细透视辅助脚本教程）1、许多玩家不知道越乡游辅助工具辅...
三分钟详情！传送屋高防版辅助，...
三分钟详情！传送屋高防版辅助，aapoker软件讲解（详细透视辅助软件教程）；传送屋高防版辅助黑科技...
三分钟教程！天天开心王国有没有...
三分钟教程！天天开心王国有没有，德扑软件决策（详细透视辅助助手教程）；原来确实真的有挂（需添加指定薇...