【纯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 上的 ...
随机推荐
- 生成GUID唯一值的方法汇总（dotnet/javascript/sqlserver）
一.在 .NET 中生成1.直接用.NET Framework 提供的 Guid() 函数,此种方法使用非常广泛.GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的任何两台计 ...
- 2.7我们的第一个Java程序
最后,让我们正式编一个程序(注释⑤).它能打印出与当前运行的系统有关的资料,并利用了来自Java标准库的System对象的多种方法.注意这里引入了一种额外的注释样式:“//”.它表示到本行结束前的所有 ...
- Chrome 开发工具之Timeline
之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...
- UTF-8编码的空格（194 160）问题
前台的字符串传递到后台进行处理,发现了一个较诡异的问题:字符串中的一个空格(ASCII:32)被UTF-8编码之后变成了一个诡异的字符(ASCII:194 和 160的组合)!但在后台其表象还是空格. ...
- CPU阿甘之烦恼
转自“码农翻身”公共号,原文地址CPU阿甘之烦恼 总结:(程序加载到内存运行的演变过程) 内存存放程序.OS负责加载程序到内存.CPU负责运行内存中的程序 1.串行:加载一个完整程序到内存,CPU运行 ...
- 分享公司Basecode的用法
主题 公司在basecode的用法上是比较有新意的,所以准备记录分享下公司的用法. 说明 basecode公司的一个主要用途就是用于一些基础的代码表,参数表的前台操作.这些表有很多,用spring d ...
- SQL Server监控报警架构_如何添加报警
一.数据库邮件报警介绍 数据库邮件是从SQL Server数据库引擎发送电子邮件企业解决方案,使用简单传输协议(SMTP)发送邮件.发送邮件进程与数据库的进程隔离,因此可不用担心影响数据库服务器. 数 ...
- LPC1769 CAN的自测试模式
一.背景 客户要了一块单路CAN的板子,他希望在没有其他板子的情况下进行自行测试,然后按照我写的 APP选择自收发测试选项,却无法接收到发送的信息,但是外接了一块板子就可以接收到自己发送的 信息:由于 ...
- 【bzoj4721】[Noip2016]蚯蚓
题目描述 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓.蛐 ...
- Mac Pro 日历增强工具 Itsycal
Mac 自带的日历工具一点也不好用,好在 Itsycal 弥补了这个缺陷,效果图如下: 下载地址:https://www.mowglii.com/itsycal/,下载解压后,把 Itsycal.ap ...