Snippets Collections
.outer {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9 / 16) * 100%;
  }
  > .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
  
<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>
bookmark
dashboard

Fri Oct 02 2020 16:22:20 GMT+0000 (UTC) https://ratiobuddy.com/

#images #aspect-ratio
bookmark
dashboard

Tue Sep 22 2020 12:12:24 GMT+0000 (UTC)

#html #images #picture

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension