CSS实现两栏布局内图片自适应列宽的圆形裁剪效果

原有代码出现头像显示为椭圆、无法自适应裁剪的核心原因是：直接给非1:1比例的图片加border-radius: 50%时，图片会按照原始比例拉伸显示，无法形成正圆；而固定宽高的写法又无法跟随列宽自适应。
可以通过「容器锁正方形比例+图片填充裁剪」的方案实现需求，不需要写死固定尺寸：

• 给左栏头像容器设置aspect-ratio: 1/1，让容器高度自动跟随自身宽度保持1:1的正方形比例，完全适配20%的列宽设置
• 图片设置宽高100%铺满容器，搭配object-fit: cover实现居中裁剪，避免图片拉伸变形，再加border-radius: 50%即可呈现完美正圆
• 修正原有清浮动的错误写法：内联样式无法直接定义::after伪类，直接给浮动父容器加overflow: auto即可完成浮动清除，代码更简洁

完整实现代码 #

<div>
    <!-- 浮动父容器清除浮动 -->
    <div style="overflow: auto;">
        <!-- 左栏：20%宽度，自动锁定1:1正方形比例 -->
        <div style="float: left; width: 20%; aspect-ratio: 1 / 1;">
            <img 
                class="alignnone wp-image-7" 
                src="https://youthjamofficial.com/wp-content/uploads/2022/07/pexels-photo-592753.jpeg" 
                alt="用户头像" 
                style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" 
            />
        </div>
        <!-- 右栏内容 -->
        <div style="float: left; width: 75%; padding-left: 5%;">
            <h1 style="font-size: 25px;">Alex James (SSS)</h1>
            <p>
                Lorem ipsum dolor sit amet et delectus accommodare his consul copiosae legendos at vix ad putent delectus delicata usu. Vidit dissentiet eos cu eum an brute copiosae hendrerit.
            </p>
        </div>
    </div>
</div>

老旧浏览器兼容方案 #

如果需要兼容不支持aspect-ratio属性的浏览器（如IE11），可以用padding百分比等比hack实现正方形容器，替换左栏代码即可：

<!-- 兼容旧浏览器的左栏实现 -->
<div style="float: left; width: 20%; position: relative; padding-top: 20%;">
    <img 
        class="alignnone wp-image-7" 
        src="https://youthjamofficial.com/wp-content/uploads/2022/07/pexels-photo-592753.jpeg" 
        alt="用户头像" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" 
    />
</div>

该方案利用padding百分比值参照父元素宽度计算的特性，用padding-top: 20%撑出与宽度相等的容器高度，再将图片绝对定位铺满容器，实现效果和现代属性方案完全一致。

内容的提问来源于stack exchange，提问作者Balaram Behera