React image component width

yarden

August 17, 2019 11:55

Hey,
I'm experimenting with the react image, and I'm trying to create a header image. I want the image to be 100vh height and width for every screen, and i want to crop the image to it's center.

In my library i have an image at the size of 1920 × 1275.

My react component is:

<section className="header-container">

<Image.../>

</section>

.header-container{

width: 100%;

}

 

I have tried few settings, such as:

dpr="auto"

responsive

width="auto"

crop="scale"

client_hints="true"

 

which resulted in width of 3072px;

 

I have tried to play with the width, crop and height options, all resulted in a huge image and sometimes distorted.

 

I'm using the package mainly to deliver images in different sizes to different clients without the need to add the srcset attribute.

 

What are the right parameters for the settings I want?

Thanks in advance

 

0

• 

  Eyal Katz Talmon

  August 18, 2019 12:39

  Hey Yarden,

  Notice that though the Client Hints solution seems to be the easiest and intuitive way to go, it is currently partly restricted by Google (due to privacy concerns), and works only on the mobile version of Chrome. More information regarding Client Hints and Cloudinary can be found here.

  Therefore it is currently recommended to use our JavaScript solution for responsive images.

  Do you aim at delivering the images on mobile Chrome only? Have you tested this code on mobile Chrome?

  Thanks,

  Eyal

  0
• 

  yarden

  August 18, 2019 19:18

  Hey,
  Thanks for the answer, but I can't seem to figure out how to use the sdk with react.
  Do you happen have any small example projects maybe?

  I've installed the package and imported it into the component.
  In the component I've set:

  let cl=newcloudinary.Cloudinary({cloud_name:"my-cloud-name", secure:true});

   

  cl.responsive();

   

  and then:
  

  <sectionclassName="header-container">

  <img

  data-src="https://res.cloudinary.com/dkfkgqske/image/upload/w_auto,c_scale/header/HeaderDog1.jpg"

  className="cld-responsive"/>

  </section>

   

  When checking the console, I see there is no src attribute. What is the right way to integrate it with react?
  Thanks

  0
• 

  Eyal Katz Talmon

  August 19, 2019 14:10

  Following is a simple example of achieving responsive images behavior (after installing the React SDK - following the integration steps provided here) -

  First import the relevant components -

  import {Image, Transformation} from 'cloudinary-react';

   

  Then rendering the image -

  render() {

     return (

        <div>

           <Image cloudName="<cloud_name>" dpr="auto" responsive width="auto" crop="scale" publicId="sample">

             <Transformation effect="cartoonify"/>

           </Image>

        </div>

     );

  }

   

  More information about using Cloudinary and responsive images can be found here and here.

   

  Hope this helps! let me know if you have any further questions.

  0
• 

  yarden

  August 19, 2019 18:48

  Hey,
  Thanks for the example.
  The problem was the dpr. When I set it to auto, for some reason my laptop was detected to 2, that is why the url was fetching such a huge image. I removed the dpr attribute and now it works very well.
  
  

  Thanks a lot for the help!

  0
• 

  Eyal Katz Talmon

  August 20, 2019 09:29

  Sure! Glad it worked out.

  0

Post is closed for comments.