Note from 24 May 2023

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>?

  1. Note from 4 April 2024

    Most mentions of the magical CSS object-fit: cover; in development tutorials should be accompanied by a warning: in most situations, it means the browser will download an image that is larger than required (at least in one direction), and optimization on the server side could be a better option.