如何仅用HTML在Klaviyo邮件中裁剪Instagram图片为1:1且不扭曲？

我用Klaviyo发送邮件，通过RSS拉取Instagram数据，想在邮件末尾添加Instagram动态模块，希望图片呈现1:1正方形，但尝试裁剪时图片总是扭曲而非裁剪，HTML基础薄弱，寻求帮助。

当前使用的代码可成功从RSS取出3张图片并排显示，并链接至Instagram原帖（此代码由Klaviyo针对该场景推荐），但会将图片强制拉伸为150×150像素：

<div>{% for item in feeds.brinn_ig_feed.rss.channel.item|slice:":3" %}
    <table style="display: inline-block; margin-left: auto; margin-right: auto;">
        <tbody>
            <tr>
                <td style="padding-right: 15px; padding-left: 18px; width: 150px;"><a href="{{ item.link }}"> <img
                            style="margin: 1px" src="{{ item.description }}" width="150" height="150" /></a>
                </td>
            </tr>
        </tbody>
    </table>
    {% endfor %}
</div>

我尝试添加aspect-ratio:1/1和overflow:hidden属性，结果仅实现图片缩放，并未达到裁剪效果：

<div>{% for item in feeds.brinn_ig_feed.rss.channel.item|slice:":3" %}
    <table style="display: inline-block; margin-left: auto; margin-right: auto;">
        <tbody>
            <tr>
                <td style="padding-right: 15px; padding-left: 18px; width: 150px;"><a href="{{ item.link }}"> <img
                            style="margin:1px; overflow:hidden; aspect-ratio: 1/1" src="{{ item.description }}" /></a></td>
            </tr>
        </tbody>
    </table>
    {% endfor %}
</div>

错误原因 #

你犯了两个关键错误：

• overflow:hidden是容器属性，直接加在<img>标签上无效——它需要作用在包裹图片的父元素上，才能隐藏超出容器的部分。
• aspect-ratio仅能让图片保持比例缩放，无法裁剪超出区域，要实现裁剪必须配合容器固定尺寸和object-fit:cover属性。

另外，邮件客户端对CSS的支持比浏览器有限，需采用兼容性更好的写法。

解决方案 #

给图片套一个固定尺寸的容器（用<td>或额外<div>），设置容器的width、height和overflow:hidden，再给图片设置width:100%、height:100%和object-fit:cover，这样图片会填满容器并裁剪超出部分，同时保持比例不扭曲。

修改后的代码：

<div>{% for item in feeds.brinn_ig_feed.rss.channel.item|slice:":3" %}
    <table style="display: inline-block; margin-left: auto; margin-right: auto;">
        <tbody>
            <tr>
                <td style="padding-right: 15px; padding-left: 18px; width: 150px; height: 150px; overflow: hidden;">
                    <a href="{{ item.link }}" style="display:block; width:100%; height:100%;">
                        <img style="margin:0; width:100%; height:100%; object-fit:cover;" src="{{ item.description }}" alt="Instagram post image" />
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    {% endfor %}
</div>

代码说明 #

• 将<td>设置为150×150固定尺寸，添加overflow:hidden作为裁剪容器。
• 给<a>标签设置display:block和100%宽高，确保点击区域覆盖整个容器。
• 图片设置width:100%和height:100%填满容器，object-fit:cover让图片保持比例并裁剪超出部分，避免扭曲。

兼容性 fallback #

若遇到部分老邮件客户端不支持object-fit，可改用背景图方式：

<td style="padding-right:15px; padding-left:18px; width:150px; height:150px; overflow:hidden; background-image:url('{{ item.description }}'); background-size:cover; background-position:center;">
    <a href="{{ item.link }}" style="display:block; width:100%; height:100%;"></a>
</td>

这种写法将图片作为<td>背景，自动裁剪为正方形，同时保留点击链接。

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