如何在块级元素中用img标签实现满宽居中无变形的背景效果

你当前的实现仅给绝对定位的img标签设置了height: 100%，既没有约束图片的原始宽高比，也没有配置裁切、居中规则，才会导致图片沿宽度方向拉伸变形，无法达到和CSS背景cover居中一致的效果。

只需要调整两处CSS规则，即可完全匹配需求：

/* 父容器样式 */
.node--view-mode-similar .layout {
    position: relative;
    margin-bottom: 0;
    padding: 1rem 1rem 0.2rem 1rem;
    border: 2px solid #ced8dd;
    /* 新增：裁切超出容器范围的图片内容 */
    overflow: hidden;
}

/* img标签样式 */
.node--view-mode-similar .block-field-blocknodearticlefield-article-image img {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    /* 让图片占满容器宽高 */
    width: 100%;
    height: 100%;
    /* 保持宽高比缩放，覆盖容器不拉伸 */
    object-fit: cover;
    /* 图片水平、垂直双向居中 */
    object-position: center;
}

• object-fit: cover：是实现和background-size: cover同等效果的核心属性，会在保留图片原始宽高比的前提下缩放图片，直到图片完全覆盖容器区域，彻底避免拉伸变形，超出容器的部分默认不渲染。
• object-position: center：对应background-position: center的效果，保证图片在垂直、水平方向都居中显示，满足你垂直居中、占满全宽、超出隐藏的需求。
• 父容器添加的overflow: hidden：作为兜底规则，保证所有超出容器边界的图片内容都会被隐藏，和背景图的渲染逻辑完全一致。

兼容提示：如果需要适配IE11等不支持object-fit的老旧浏览器，可以给img追加min-width: 100%; min-height: 100%;属性，同时用top: 50%; left: 50%; transform: translate(-50%, -50%);替换原来的top:0; left:0实现居中，现代浏览器无需额外兼容处理。

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