【纯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 上的 ...
随机推荐
- Netty 系列之 Netty 高性能之道
1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友通过私信告诉我,通过使用 Netty4 + Thrift 压缩二进制编解码技术,他们实现了 10 W TPS(1 K 的复杂 POJO 对象)的跨 ...
- jquery隐藏侧边栏和折叠侧边栏方法
两种效果如下所示: 隐藏侧边栏: 折叠侧边栏: 下面,分享隐藏侧边栏实现方法: 实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果 html部分: <di ...
- 图解Netty之Pipeline、channel、Context之间的数据流向。
声明:本文为原创博文,禁止转载. 以下所绘制图形均基于Netty4.0.28版本. 一.connect(outbound类型事件) 当用户调用channel的connect时,会发起一个 ...
- SB中设置UITextField 无边框，真机上输入汉字聚焦时，文字 下沉
解决方案:sb中一定要设置有边框,然后在代码里设置成无边框 然后正常了. 参考:https://segmentfault.com/q/1010000007244564/a-10200000073481 ...
- php扩展memcached和memcache的安装配置方法：转载
本文转载:http://www.jb51.net/article/56999.htm php连接memcached缓存服务器的客户端有两个,一个是memcache是比较底层的开发库,memcached ...
- 遍历Map的方法
1.使用 entrySet() entrySet() --> 官方推荐将Map转换成Map.Entry对象的Set集合 Set entrys = map.entrySet(); Iterat ...
- Apache Curator: Zookeeper客户端
Apache Curator Framework url: http://curator.apache.org/curator-framework/ The Curator Framework is ...
- JavaScript面向对象和原型函数
对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 常用的几种对象创建模 ...
- svn检出的时候报 Unable to connect to a repository at URL错误（摘自CSDN）
背景:1. SVN服务器:VisualSVN-Server-2.5.5: 2. SVN客户端:TortoiseSVN-1.7.6.22632-x64-svn-1.7.4.msi: 在S ...
- SDC Tcl package of Timequest
Tcl comand Tcl Commands all_clocks all_inputs all_outputs all_registers create_clock create_generate ...