Contents tagged “responsive”

There are 62 contents with this tag:

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

  2. Note from 29 September 2022

    I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/

    True!

    But most images are currently not or badly optimized. 😔

    They would benefit a lot from an image CDN: resize, compression, modern formats, etc.

  3. Note from 15 January 2022

    📢 The 3rd Edition of EVERY LAYOUT is now available!

    We were blown away reading all the kind words you gave us for testimonials; have some logical properties as a thank you!
    every-layout.devN

    Don't have this masterpiece yet? Get it now, it will prevent headaches when creating CSS layouts!

    The layout of my #Eleventy project https://pack11ty.dev/ uses it to get a responsive layout without any media query.

  4. Note from 27 March 2020

    images-responsiver is a simple solution for most responsive images needs

    Is it catchy enough? 😁

    Here's my latest pet project, trying to help people struggling with responsive images: https://nhoizey.github.io/images-responsiver/

    If you use #Eleventy, there's also a plugin: https://github.com/nhoizey/eleventy-plugin-images-responsiver

    Documentation is still a little rough around the edges, but should be enough at least for people already knowing npm and JS.

  5. Responsive Icons with SVG

    There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉

See all tags.