CSS——微信朋友圈图片样式实现方法

最新推荐文章于 2025-03-17 11:26:08 发布

Mickey_于浩

最新推荐文章于 2025-03-17 11:26:08 发布

阅读量8.7k

点赞数

分类专栏： CSS 文章标签：微信微信朋友圈图片正方形图片图片等比例显示九宫格图片

本文链接：https://blog.csdn.net/yu17310133443/article/details/72674423

版权

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现图片等比缩放并正方形显示的方法，通过设置图片容器的高度为0及底部填充比例来达到自适应效果，适用于微信朋友圈式的图片列表展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

像微信朋友圈一样，添加图片的时候，等比例正方形显示在列表中，如何让图片根据宽高来自适应显示在页面上呢？示例如下：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />  
        <style type="text/css">
			.figure-list{
			  margin: 0;
			  padding: 0;
			}
			.figure-list:after{
			  content: "";
			  display: block;
			  clear: both;
			  height: 0;
			  overflow: hidden;
			  visibility: hidden;
			}
			.figure-list li{
			  list-style: none;
			  float: left;
			  width: 23.5%;
			  margin: 0 2% 2% 0;
			}
			.figure-list figure{
				border: 1px solid #000;
			  position: relative;
			  width: 100%;
			  height: 0;
			  overflow: hidden;
			  margin: 0;
			  padding-bottom: 100%; /* 关键就在这里 */
			  background-position: center;
			  background-repeat: no-repeat;
			  background-size: cover;
			}
			.figure-list figure a{
			  display: block;
			  position: absolute;
			  width: 100%;
			  top: 0;
			  bottom: 0;
			}
</style>
<ul class="figure-list">
  <li>
    <figure style="background-image:url(1.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(2.png)">
      <a href="#"></a>
    </figure>
  </li>
   <li>
    <figure style="background-image:url(3.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(4.png)">
      <a href="#"></a>
    </figure>
  </li>

   <li>
    <figure style="background-image:url(5.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(6.png)">
      <a href="#"></a>
    </figure>
  </li>
</ul>
</html>