Last updated: Nov-01-2023
Learn how to dynamically generate images at different sizes and aspect ratios, and dynamically crop with AI in React using Cloudinary.
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
|0:00||You can resize and crop images on the fly with Cloudinary while also automatically focusing on the most interesting parts of your images.|
|0:15||Resizing an image via the
|0:43||Import and the use the
|1:26||Add a height value also, and you can
|1:56||You can add another resize event that will act on the result of the first resize event. In this case, first cropping an image and then scaling it down.|
Transformation BasicsLearn the basics of a transformation URL
Gravity Crops for ImagesIndicate which areas to keep when cropping
Complex TransformationsCombine transformations to generate a 3D canvas
Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.