0

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>
Kingsford
  • 15
  • 3

1 Answers1

0

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>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thanks Kaiido. That's given me an idea of how I could implement this by adding the class to the picture element to enable the admins to set the object-position from the page builder. – Kingsford Apr 06 '23 at 09:54