always fit ima

Comments

4 comments

  • Avatar
    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: http://cloudinary.com/documentation/image_transformation_reference#crop_parameter

    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: http://cloudinary.com/blog/adaptive_browser_based_image_format_delivery
    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: https://codepen.io/eeeps/pen/BdoXRN

    Does that help?

    0
    Comment actions Permalink
  • Avatar
    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]">

     

     

    0
    Comment actions Permalink
  • Avatar
    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). http://cloudinary.com/blog/automatic_responsive_images_with_client_hints

    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. https://github.com/cloudinary/cloudinary_js

    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?

    0
    Comment actions Permalink
  • Avatar
    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 :)

     

    0
    Comment actions Permalink

Please sign in to leave a comment.