如何在div中将图片设置为静态固定位置？附现有实现代码

要实现所有商品卡片的图片统一固定在红色分割线上方的同一顶部位置，你可以通过约束图片父容器高度、设置图片顶部对齐的方式实现，具体修改如下： #

1. 内联样式修改（直接改现有代码） #

找到你代码里的<figure>和<img>部分，替换为如下内容即可：

<figure style="height: 220px; overflow: hidden; margin: 0;">
    <img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"
        style="width: 100%; border-radius: 8px; object-fit: cover; object-position: top;" 
        product_id='45' onmousemove="deshabilitar()"/>
    <div class="centrado2" name="disponible_helado" id="agotado_45"></div>
</figure>

参数说明：

• 你可以根据实际需要调整figure的height属性数值，匹配你想要的图片展示高度
• object-position: top会保证图片始终从顶部开始裁剪展示，不会出现上下偏移
• overflow: hidden会隐藏图片超出父容器高度的部分，保证所有卡片图片高度一致

2. 全局样式修改（适配所有同类卡片） #

如果你有多个同类商品卡片，不想逐个修改内联样式，可以把以下代码加入你的CSS样式文件中：

/* 所有商品卡片的图片父容器统一高度 */
.contenedor figure {
    height: 220px;
    overflow: hidden;
    margin: 0;
}
/* 所有商品卡片的图片统一顶部对齐 */
.contenedor figure img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    object-position: top;
}

补充说明：你代码中使用的<center>标签属于HTML已废弃标签，建议替换为给父元素添加style="text-align: center"的方式实现居中效果，兼容性更好。

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