如何让图片显示顶部而非居中裁剪？CSS实现方案咨询

完全不需要手动裁剪图片，用CSS就能搞定你的需求。

你当前用的object-fit: cover默认会把图片居中对齐后裁切超出容器的部分，这就是为啥顶部和底部都被裁掉的原因。只需要给img元素加个object-position属性，指定图片对齐顶部就行：

img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: top; /* 也可以写 0 0，效果完全一致 */
    display: block;
}

额外说明： #

• object-position的取值逻辑和background-position一致，第一个值管水平位置，第二个管垂直位置
• 除了top，你也能用具体百分比或像素值微调，比如object-position: 0 10px会让图片垂直方向向下偏移10px后再裁切
• 这个需求和position属性无关，不用再折腾定位相关的设置

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