微信朋友圈，图片显示示例

最新推荐文章于 2021-08-15 20:31:55 发布

原创最新推荐文章于 2021-08-15 20:31:55 发布 · 805 阅读

1 ·

CC 4.0 BY-SA版权

thinkphp 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了使用CSS进行背景图片布局的方法，包括如何利用百分比填充、定位和大小调整等属性实现响应式设计，适用于各种屏幕尺寸。

<ul class="e03">
	<volist name="data['pyq_duotu']" id="f">
	    <li>
	        <figure style="background-image:url('{$f}')" data-src="{$f}" class="figure-list-img">
	            <a href="javascript:;"></a>
	        </figure>
	    </li>
    </volist>
</ul>

CSS

.m03pyq .d01 .e03{margin:0;padding:0;}
.m03pyq .d01 .e03:after{display:block;visibility:hidden;clear:both;overflow:hidden;height:0;content:'';}
.m03pyq .d01 .e03 li{float:left;width:24%;margin:2% 2% 0 0;list-style:none;}
.m03pyq .d01 .e03 figure{position:relative;overflow:hidden;width:100%;height:0;margin:0;padding-bottom:100%;border:none;background-repeat:no-repeat;    /* 关键就在这里 */background-position:center;background-size:cover;}
.m03pyq .d01 .e03 figure a{position:absolute;top:0;bottom:0;display:block;width:100%;}