【纯css】响应式图片列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<style>
.pGImgList{
width: 100%;
flex-wrap: wrap;
}
.pGImgList .pGImgItem{
width: 26.5%;
margin-bottom: 0.25rem;
}
.pGImgList .pGImgItem:after{ width: 22.64%;
height: 100%;
content: "+";
font-weight: 400;
font-size: 0.4rem;
color: #333; display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
}
.pGImgList .pGImgItem .pGImgBox{
position: relative;
width: 77.36%;
padding-top: 77.36%;
border: 1px solid #ccc;
}
.pGImgList .pGImgItem:nth-child(4n){
width: 20.5%;
}
.pGImgList .pGImgItem:nth-child(4n):after,
.pGImgList .pGImgItem:last-child:after
{
display: none;
}
.pGImgList .pGImgItem:nth-child(4n) .pGImgBox{
width: 100%;
padding-top: 100%;
}
.pGImgList .pGImgItem .pGImgBox .pGImgBoxIn{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
overflow: hidden;
}
.pGImgList .pGImgItem .pGImgBox .pGImgBoxIn img{
margin: auto;
height: 100%;
max-width: 100%;
display: block;
} .flex{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; align-items: stretch;
-webkit-align-items: stretch;
justify-content: flex-start;
-webkit-justify-content: flex-start;
} </style>
</head>
<body>
<div class="pGImgList flex">
<div class="pGImgItem flex">
<div class="pGImgBox">
<div class="pGImgBoxIn">
<img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg">
</div>
</div>
</div>
<div class="pGImgItem flex">
<div class="pGImgBox">
<div class="pGImgBoxIn">
<img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg">
</div>
</div>
</div>
<div class="pGImgItem flex">
<div class="pGImgBox">
<div class="pGImgBoxIn">
<img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg">
</div>
</div>
</div>
<div class="pGImgItem flex">
<div class="pGImgBox">
<div class="pGImgBoxIn">
<img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg">
</div>
</div>
</div>
<div class="pGImgItem flex">
<div class="pGImgBox">
<div class="pGImgBoxIn">
<img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg">
</div>
</div>
</div>
<div class="pGImgItem flex">
<div class="pGImgBox">
<div class="pGImgBoxIn">
<img src="http://img01.qulishi.com/2016-07/31/579d31b4/579d31b4d2d3e6e80c5664ef/1469921711422_161924.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
【纯css】响应式图片列表的更多相关文章
- CSS与HTML5响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
- CSS 与 HTML5 响应式图片
什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很 ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- web响应式图片设计实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 继续送假期干货——响应式图片工具smartImg
中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- bootstrap-内联表单 水平（横向）表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- CSS 响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- css响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
随机推荐
- Zabbix监控nginx-rtmp status（json版）
与前面的文章 zabbix监控nginx-rtmp status(html版)区别只在于取值的页面不一样 http://127.0.0.1:81/control/get/all_streams sta ...
- Nginx的启动脚本（Centos）
vim /etc/init.d/nginxservice nginx start #!/bin/sh # chkconfig: 2345 85 15 # description:Nginx Serve ...
- Jmeter响应内容为文件
最近测试一个接口是文档转换的接口,比如说把rtf文件转换为PDF,这样的接口调用通过结果树只能查看接口响应是否成功,但是看不到转换后的文档.通过Jmeter监听中的Save Responses to ...
- redis消息队列简单应用
消息队列出现的原因 随着互联网的高速发展,门户网站.视频直播.电商领域等web应用中,高并发.大数据已经成为基本的标识.淘宝双11.京东618.各种抢购.秒杀活动.以及12306的春运抢票等,他们这些 ...
- 第一个spring、springmvc、mybatis、freemarker项目小知识（一）
1.持久层开发(Mybatis) 1.1 添加,非空字段必须给值,不是非空加判断,有值添加无值不添 1.2 删除,注意外键关系的级联删除.(事务传播行为) 1.3 更新,每个字段单独 ...
- C#对于文件的读写
C#文件的读写操作 转载请注明出处 http://www.cnblogs.com/Huerye/ /// <summary> /// 写入txt文件 /// </summary> ...
- 网络第二节——AFNworking
/** 要使用常规的AFN网络访问 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; ...
- icomoon图标的使用
这里的图标可以自己定义 网址:https://icomoon.io/app/#/select/ 定义完后,自己下载下来 引用: <link href="css/style.css ...
- 调试D2JS
D2JS 最终加载运行于 nashorn 上,目前能调试 nashorn js 的 IDE 只有一款:NetBeans.eclipse 没有计划,神器号称支持 nashorn,对于简单类型可以观察,对 ...
- runtime 第四部分method swizzling
接上一篇 http://www.cnblogs.com/ddavidXu/p/5924597.html 转载来源http://www.jianshu.com/p/6b905584f536 http:/ ...