使用object-position CSS控制图片：屏幕缩小时聚焦人物主体

要让图片在不同屏幕尺寸下始终聚焦人物主体，你可以通过调整object-position的值，结合媒体查询针对不同屏幕宽度优化定位：

修改后的CSS代码 #

img{
    width: 100%;
    height: 1000px;
    object-fit: cover;
    /* 基础定位，确保人物在多数屏幕下可见 */
    object-position: 30% center;
}

/* 针对小屏幕（小于500px）优化定位 */
@media (max-width: 500px) {
    img{
        /* 根据人物实际位置微调百分比，确保人物居中显示 */
        object-position: 40% center;
    }
}

原理说明 #

• object-position的百分比值中，第一个数值代表水平位置（0%对应最左侧，100%对应最右侧），第二个代表垂直位置。你可以根据图片里人物的实际位置微调这个百分比，比如人物在水平方向35%处，就设为35% center。
• 媒体查询@media (max-width: 500px)专门针对移动端调整定位，避免人物被裁剪。

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 100%;
            height: 1000px;
            object-fit: cover;
            object-position: 30% center;
        }

        @media (max-width: 500px) {
            img{
                object-position: 40% center;
            }
        }
    </style>
</head>
<body>
   <img src="https://source.unsplash.com/a-woman-is-shopping-in-a-grocery-store-pf82pJc-4pc" alt="购物的女性">

</body>
</html>

你可以根据实际预览效果，微调object-position的百分比数值，直到人物在所有屏幕尺寸下都保持在可视区域内。

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