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

最新推荐文章于 2025-05-16 12:07:33 发布

转载最新推荐文章于 2025-05-16 12:07:33 发布 · 5.2k 阅读

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种让图片根据宽度和高度自适应显示的方法，通过HTML和CSS实现图片按比例缩放，并保持正方形显示效果，适用于类似微信朋友圈的图片列表布局。

摘要生成于 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>