using client hints to return dynamic full screen images for different viewport sizes

Simon Shepard

April 24, 2018 21:14

Hey,

If I have random differently sized images, that I want to make fullscreen on all different devices, how do I go about that?

I understand that using client hints, I can provide the image width to the api and get a width cropped image returned like so :

image/upload/w_auto,c_fill,g_auto/

but if my image width is greater than the image height (say 16:9) then I will not get a fullscreen image, it will have have big borders on the top and bottom.

It works if I know the device width & height like so:

image/upload/w_375,h_667,c_fill,g_auto/

this will return a fullscreen image for a device which has a resolution of 375x667

but different phone versions have different heights, e.g. iphone 8 vs X where heights are 667 or 812.

So how to I craft a request that can generate me a fullscreen image, without knowing the height of the device?

 

Many thanks!

0

• 

  Marissa Masangcay

  April 25, 2018 21:49

  Hi Simon,

  Currently we only support automatically calculating the width. So you can use Client Hints to display a 100% width like so:

  <meta http-equiv="Accept-CH" content="DPR, Width">
  
  […snip…]
  
  <img sizes="100vw"
       src="https://res.cloudinary.com/demo/w_auto/bike.jpg" 
       alt="Smiling girl with a bike." />

  You can find this particular example and more information about Client Hints in this article:
  https://cloudinary.com/blog/automatic_responsive_images_with_client_hints

  As a workaround for obtaining the height you can use javascript to detect the containing div’s size and then use that as the h_ value for the URL.

  Hope this helps!

  0

Post is closed for comments.