【纯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 上的 ...
随机推荐
- Shiro-集成Spring
集成Spring 加入Spring 和Shiro的jar 包 配置Spring 及SpringMVC 参照:1.3.2\shiro-root-1.3.2-source-release\shiro-ro ...
- COGS 2532. [HZOI 2016]树之美 树形dp
可以发现这道题的数据范围有些奇怪,为毛n辣么大,而k只有10 我们从树形dp的角度来考虑这个问题. 如果我们设f[x][k]表示与x距离为k的点的数量,那么我们可以O(1)回答一个询问 可是这样的话d ...
- 安装了ruby后怎么安装sass
在命令行中输入 ruby -v 查看版本号 先移除默认的https://rubygems.org源,命令为gem sources --remove https://rubygems.org/,按回车 ...
- 真正解决vbox不能为虚拟电脑打开一个新任务的解决方法
今天小编电脑上出现了一个问题,如上图,经过了一个朋友的帮助终于问题解决了,解决方法: 在每一个中把 红框中打上勾号即可
- Unity Animator动画状态机 深入理解（一）
接触Unity以来就已经有了Animator,Animation用的少,不过也大概理解他俩之间的一个区别于联系. 图中其实就是Animator和Animation之间的区别于联系了,啊!你肯定会告诉我 ...
- Swift—调用系统相册和相机
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...
- 向maven中央仓库提交jar
从来都是从中央仓库下载jar,这次需要向中央仓库提交jar, 利用Sonatype OSSRH可以把jar等资源提交给Maven的中央仓库. Sonatype OSSRH介绍: Sonatype OS ...
- lcok-free简易实现
lock-free是一种基于原子变量类来构建的非阻塞同步算法. 比较并交换(compare-and-swap) 我们经常会先检查某项东西,然后对其进行修改,如if(X...) {X=...}.这种行为 ...
- AD域组策略-只显示指定的控制面板选项配置方法
操作方法: 1.打开组策略管理器,新建一个组策略并右击编辑. 2,找到隐藏指定的“控制面板”项并双击打开:并参照设置: 填入要显示的控制面板项目,比如: joystick.cpl 表示将显示“游戏控制 ...
- REDHAT一总复习1 cups 打印服务配置
停止cups服务 $ sudo systemctl stop cups $ sudo systemctl status cups 配置cups服务,使其不在系统启动时启动 $ sudo systemc ...