【纯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 上的 ...
随机推荐
- java socket API
java.net类 Socket java.lang.Object java.net.Socket 直接已知子类: SSLSocket public class Socketextends Objec ...
- [bigdata] kafka基本命令 -- 迁移topic partition到指定的broker
版本 0.9.2 创建topic bin/kafka-topics.sh --create --topic topic_name --partition 6 --replication-factor ...
- Java MD5机密算法的使用
MD5 是常用的加密算法,是不可逆的.既只能加密,但不能解密. package cn.com.ctsi.csdp.base.util; import java.security.MessageDige ...
- TThread.CreateAnonymousThread() 匿名线程对象的应用
unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...
- SQL分页语句三方案
方法一: SELECT TOP 页大小 * FROM table1 WHERE id NOT IN ( SELECT TOP 页大小*(页数-1) id FROM table1 ORDER BY id ...
- 【转】机器学习教程 十四-利用tensorflow做手写数字识别
模式识别领域应用机器学习的场景非常多,手写识别就是其中一种,最简单的数字识别是一个多类分类问题,我们借这个多类分类问题来介绍一下google最新开源的tensorflow框架,后面深度学习的内容都会基 ...
- inline-block元素vertical-align的问题分析
先来解释下这两个标签 inline-block: 字面意思:行内块元素,相当于强制转换,把一个标签设置为行内的块元素,既有块元素的部分特性(支持width\height\maigin-top\marg ...
- 利用xhsell登录到远程腾讯云服务器
xshell连接管理腾讯云服务器图文教程 打开xshell点击文件新建会话框 linux服务器ssh管理软件XSHELL下载及安装图文教程 输入公网IP地址确认下一步 选中服务器连接 一次性接受,不储 ...
- Jquery制作--美化下拉框
平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...
- 随笔分类 - Android之工具类
Android之文件搜索工具类 /** * @detail 搜索sdcard文件 * @param 需要进行文件搜索的目录 * @param 过滤搜索文件类型 */ private void sear ...