Maarten Van Hoof

Responsive SVGs - container vs media queries

Screenshot of “Responsive SVGs - container vs media queries”

https://codepen.io/vanhoofmaarten/full/dyvmJWN

Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML.

Responsive SVG images where already possible as I shown 8 years ago, but only external, loaded with an <img /> tag or as CSS background.

  2. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

  5. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }