css微信朋友圈的九宫格图片自适应效果

HTML结构：

<div class="pictures"><img src="data:image1.jpg" alt="图片1"><img src="data:image2.jpg" alt="图片2"><img src="data:image3.jpg" alt="图片3"><img src="data:image4.jpg" alt="图片4"><img src="data:image5.jpg" alt="图片5"><img src="data:image6.jpg" alt="图片6"><img src="data:image7.jpg" alt="图片7"><img src="data:image8.jpg" alt="图片8"><img src="data:image9.jpg" alt="图片9">
</div>

CSS样式：

.pictures {display: grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));grid-auto-rows: 100px;grid-gap: 5px;
}.pictures img {width: 100%;height: 100%;object-fit: cover;border-radius: 5px;
}

解释一下每个属性的作用：

display: grid：将容器设置为网格布局；
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))：设置网格列的数量和宽度。auto-fit表示自动适应容器宽度，minmax(100px, 1fr)表示每列的最小宽度为100px，最大宽度为1fr，即平均分配容器剩余宽度；
grid-auto-rows: 100px：设置网格行的高度为100px，保证九宫格图片呈正方形；
grid-gap: 5px：设置网格之间的间隔为5px；
width: 100%; height: 100%;：让图片充满网格；
object-fit: cover：设置图片如何适应网格，这里使用了cover，表示图片会被等比例缩放，直到完全覆盖网格；
border-radius: 5px：圆角半径，让图片边缘变得圆润

css微信朋友圈的九宫格图片自适应效果相关推荐

仿微信朋友圈【九宫格的实现】
仿微信朋友圈[九宫格的实现] 标签: 九宫格自定义viewgroup 2017-04-18 18:39 561人阅读评论(0) 收藏举报分类: Android(25) 版权声明:本 ...
Android免费的导出微信朋友圈文字和图片的工具
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! ...
html排列图片,css3+html实现微信朋友圈不同尺寸图片排列预览功能
css 模拟朋友图片不同数量排列,html 图片排列,微信朋友圈css img 自适应,微信朋友圈照片排列,vue 朋友圈图片预览,微信朋友圈缩略框尺寸,朋友圈图片尺寸,新版微信朋友圈图片大小 ht ...
iOS UITableView+FDTemplateLayoutCell 配合AutoLayout分分钟教你实现类似微信朋友圈的动态高度自适应
11.30日更新,实现了简单的微信朋友圈,点赞,评论,图片,高度自适应,下拉展开等各种效果Demo 点击打开链接 11.10更新这种高度自适应的Label切记一定要加上这个属性 preferredM ...
音乐相册怎么做？3步快速学会制作微信朋友圈的精美音乐相册效果
现在抖音.微信朋友圈最流行分享什么内容?音乐相册必须拥有姓名! 那在社交平台收获超多赞的爆款音乐相册怎么做? 如何快速制作一个精美的音乐相册? 今天,教大家通过数码大师来快速制作一个效果精美的音乐相册 ...
python微信朋友圈刷图_10分钟用Python做个微信朋友圈抽奖九宫格
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 哈哈,笑出猪叫!这个玩法利用了朋友圈发长图会显示中间局部的设定,搞笑之余也为朋友圈广告营销贡献了新思路. 制作图的过程也不复杂,长图对应部分设计好 ...
小程序-仿微信朋友圈拖动删除图片
♠ 目的微信小程序实现图片拖动删除,效果同朋友圈的图片拖动删除效果 ♠ 实现原理 1.使用微信小程序组件 movable-area 和 movable-view 进行拖动处理 2.根据屏幕高度.图片 ...
Android 仿微信朋友圈不同数量图片排列方式
前段时间做了不同数量的图片展示,给大家分享一下,先上个效果图: 代码比较简单,相信大家都看得懂: public class DynamicImageAdapt ...
微信朋友圈的实现(图片查看，手势放大、缩小)
效果图: 简单的就这样,实现效果的方法有多种,可以使用ListView嵌套GridView,也可以直接使用RecycleView,这里只说RecycleView的实现方法. 难一点的地方就是每个ite ...

css微信朋友圈的九宫格图片自适应效果

css微信朋友圈的九宫格图片自适应效果相关推荐

最新文章

热门文章