能否为picture元素内不同source元素设置不同的object-position属性？

不行，因为<source>是仅用于提供资源选择逻辑的元数据元素，它本身不会被渲染到页面上——实际负责展示图片的是<picture>内部的<img>标签。你给<source>添加的style属性完全不会生效，这就是你代码无法运行的原因。

要实现不同场景下使用不同的object-position，得通过媒体查询配合<img>的样式来实现，和<source>的media条件对应起来即可。

修正后的代码示例： #

HTML：

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)">
    <source srcset="/media/cc0-images/surfer-240-200-ls.jpg" media="(orientation: landscape)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="Picture" class="responsive-img">
</picture>

CSS：

.responsive-img {
    object-fit: cover; /* 基础适配方式，可根据需求调整 */
    width: 100%; /* 确保img容器尺寸符合预期 */
    height: 300px; /* 示例高度，按需设置 */
}

@media (orientation: portrait) {
    .responsive-img {
        object-position: left top;
    }
}

@media (orientation: landscape) {
    .responsive-img {
        object-position: bottom right;
    }
}

原理很简单：当视口匹配竖屏条件时，<picture>会选择对应竖屏的<source>资源加载到<img>中，同时媒体查询触发，给<img>应用竖屏对应的object-position；横屏场景同理，两者的条件完全匹配，就能实现你要的不同资源对应不同定位的效果。

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