Skip to main content

always fit ima



  • Eric Portis

    Hello Ischa,

    The imgix functionality that you point to crops images to a given height and width in different ways. Cloudinary provides the same functionality, using the `c_` crop transformation:

    The `<picture>` code that you include does two things, which are not focused on image *creation* (like Imgix's fit and Cloudinary's crop), but rather image *delivery*:

    1. It supplies WebPs to browsers that support WebP, falling back to JPEG versions in browsers that don't support WebP. Cloudinary can do this with a single URL using the `f_auto` transformation:
    2. It supplies differently-cropped versions of the image to different users, depending on the width of their viewport (viewports narrower than 1024px get a "closeup" version, while viewports wider than that get a "fullshot"). Cloudinary does *not* provide a way to do this with a single URL.

    Here's an example of how to do what I think you want to do, with `<picture>` and Cloudinary:

    Does that help?

  • Ischa Gast

    That does help a little but what I really want is just this and that cloudinary does all the magic.
    When there is portrait space on mobile just fill it and landscape space on desktop, just fill it.

    <img src="[cloudinary-img-url]">



  • Eric Portis


    Unfortunately, Cloudinary is not yet that magical (:

    It's possible that we’ll be able to implement something like what you describe using Client Hints, but right now, they are only supported in Chrome (and we only support *scaling* images in response to the space available on the layout – not cropping aka “art directing” them).

    In the meantime, you might be able to implement something like this yourself by leveraging Cloudinary’s JavaScript library, which can wait until the page’s CSS is loaded and layout is complete before requesting an image.

    Are there technical reasons that you *can’t* use markup like the <picture> example I sent you? Or is it purely about ease-of-use?

  • Ischa Gast

    It's just the ease of use, then I just have to use and try with picture or something like that. Not that problem but it would be so nice :)



Post is closed for comments.