实现如图的效果
html 代码
<div class="apic3 cl"><div class="apic ainuolazyloadbg" data-original="data/attachment/qu_app/82/5/415_0.jpg" style="background-size: cover; display: block; background-image: url("data/attachment/qu_app/82/5/415_0.jpg");"><img decoding="async" src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%27450%27%20height%3D%27450%27%20version%3D%271.1%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20style%3D%27fill%3Atransparent%3B%27/%3E%3C/svg%3E"></div><div class="apic ainuolazyloadbg" data-original="data/attachment/qu_app/82/5/415_1.jpg" style="background-size: cover; display: block; background-image: url("data/attachment/qu_app/82/5/415_1.jpg");"><img decoding="async" src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%27450%27%20height%3D%27450%27%20version%3D%271.1%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20style%3D%27fill%3Atransparent%3B%27/%3E%3C/svg%3E"></div><div class="apic ainuolazyloadbg" data-original="data/attachment/qu_app/82/5/415_2.jpg" style="background-size: cover; display: block; background-image: url("data/attachment/qu_app/82/5/415_2.jpg");"><img decoding="async" src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%27450%27%20height%3D%27450%27%20version%3D%271.1%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20style%3D%27fill%3Atransparent%3B%27/%3E%3C/svg%3E"></div></div>
其中图片是直接以background的形式显示出来，而实体的img标签则显示一张450×450的svg透明图放入的。
CSS3 样式
.ainuo_piclist li .apic1{-webkit-flex-shrink: 0;flex-shrink: 0; margin-top:5px;overflow: hidden;}
.ainuo_piclist li .apic1 img{ max-width:79%; height:auto;}
.ainuo_piclist li .apic2{ margin-top:5px;}
.ainuo_piclist li .apic2 .apic{ width:49.5%; margin-left:1%; float:left;}
.ainuo_piclist li .apic2 img{width: 100%;height: auto;}
.ainuo_piclist li .apic2 .apic:first-child {margin-left: 0;}
/** 这里是主体代码**/
.ainuo_piclist li .apic3{}
.ainuo_piclist li .apic3 .apic{ width:32.666%; margin-left:1%; float:left; margin-top:1%;}
.ainuo_piclist li .apic3 img{width: 100%;height: auto;}
.ainuo_piclist li .apic3 .apic:first-child {margin-left: 0;}
.ainuo_piclist li .apic3 .apic:nth-child(4) {margin-left: 0;}
.ainuo_piclist li .apic3 .apic:nth-child(7) {margin-left: 0;}
以下是一个css reset样式，感觉还可以，适合用在移动端
/* common */
* { word-wrap: break-word;box-sizing: border-box;}
ul,ol,li,span,p,form,h1,h2,h3,4,h5,h6,dl,dt,dd { margin: 0; padding: 0; border: 0; z-index:inherit; }
img,a img { border:0; margin:0; padding:0; }
ul,ol,li { list-style:none; }
* { margin:0; padding:0;-webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html,body{font:17px -apple-system-font,'Helvetica Neue',sans-serif;min-height:100%;color:#111;background:#fff;}
.page, .page-group{ background:#fff;}
input,select,textarea,button { font-size:14px;}
body, ul, ol, li, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, .pr, .pc { margin: 0; padding: 0;}
textarea{font-family:microsoft yahei;}
div,p{ display:block;}
table { empty-cells: show; border-collapse: collapse; }
caption, th { text-align: left; font-weight: 400; }
ul li, .xl li { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
em, cite, i { font-style: normal; }
a img { border: none; }
label { cursor: pointer; }
.fl{ float:left;}
.fr{ float:right;}
.rq { color: red; }
.paddbot10{ padding-bottom:10px !important;}
a:link,a:visited,a:hover,a{ color:#121212; text-decoration:none; }
a.grey{ color:#999;}
#DiyBar .content{ position:static;}
.z { float: left; } .y { float: right; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }
.overflow{overflow:hidden;}
.none { display:none; }
.vm { vertical-align: middle; }
.vm * { vertical-align: middle; }
.hm { text-align: center; }
.topfix{ height:50px; width:100%;}
.linepx{ border:none; border-bottom:1px solid #e2e2e2; width:100%; text-indent:5px; margin:6px 0;}
.ainuodashedtip{background: #fffdef;border:1px dashed #e7e1cd; padding:10px; font-size:12px; color:#888;}
.ainuofenzu{ border:1px solid #eee; padding:5px; margin-top:5px;}
.bl_none { border-bottom:0 !important; }
.bl_line { }
.b_radius {border-radius:10px;}
.ausize{ font-size:14px;}
.huifusize{ font-size:14px; padding-top:5px;}
.huifusize blockquote br{ display:block;}
.tday{ color:#f90;}
.ainuolazyloadbg{ background-image:url(../lazy/lazy.png); background-position:center center;}
.b_m { margin:10px;}
.b_p { padding:10px}
.mtn { margin-top: 5px !important; }
.mbn { margin-bottom: 5px !important; }
.mtm { margin-top: 10px !important; }
.mbm { margin-bottom: 10px !important; }
.mtw { margin-top: 20px !important; }
.mbw { margin-bottom: 20px !important; }
.displaynone{ display:none;}
.pr, .pc { vertical-align: middle; padding: 0;margin: 0 0 5px 0; }
.emp{ text-align:center; padding:20px 0; font-size:14px;}
select{color:#666; font-size:14px; border:none; }
.tipnews{background: #fffdef;padding:10px; font-size:13px; color:#888; border-bottom:1px solid #eee;}