Are different object-position values for source elements possible

Question

Is it possible to set different object position properties for different sources within a picture element.

For example, the code below doesn't work:

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)" style="object-fit: left top">
    <source srcset="/media/cc0-images/surfer-240-200-ls.jpg" media="(orientation: landscape)" style="object-fit: bottom right">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="Picture">
</picture>

Answer 1

No, but you can duplicate the media query in your CSS and set the rules there:

picture img {
  object-fit: contain;
  width: 200px;
  height: 200px;
}
@media(orientation: portrait) {
  picture img {
    object-position: left top;
  }
}
@media(orientation: landscape) {
  picture img {
    object-position: bottom right
  }
}

<picture>
    <source srcset="https://picsum.photos/200/300" media="(orientation: portrait)">
    <source srcset="https://picsum.photos/300/200" media="(orientation: landscape)">
    <img src="https://picsum.photos/300/200" alt="Picture">
</picture>