Cloudinary Blog

Image Resizing: Manually With CSS and Automatically With Cloudinary

Image Resizing: Manually With CSS and Automatically With Cloudinary

With Cascading Style Sheets (CSS), you can change the size and aspect ratio of images and backgrounds. Three resizing options are available: absolute resizing, retention of the aspect ratio, and relative resizing. You can also scale and fill backgrounds. However, those are all manual chores that take time, skill, and effort.

With Cloudinary, you can easily transform images, including resizing them and their backgrounds. This article explains how to manually do those tasks with CSS and through an automated, AI-based process in Cloudinary.

Here are the topics:

Resize Images With CSS3

You can resize images with CSS3, the latest CSS version, in one of three ways, as described below. Pick your choice according to the values of the height and width properties you desire.

Absolute Resizing

With absolute resizing, you specify the height and width values along with the static ones in pixels (px), ems (em), or another absolute-size format. See this example:

Copy to clipboard
img{
  height: 100px;
  width: 200px;
}

Retention of Aspect Ratio

To retain the aspect ratio, statically modify either the height or width value and set auto for the other property to enable automatic sizing, as in this example:

Copy to clipboard
img{
  height: 100px;
  width: auto;
}

Relative Sizing

Relative sizing means sizing images according to the parent <div> or the size of the client viewport. If you apply that property to an image as the only element, the parent container is the viewport. Setting object-fit: contain retains the image’s original dimensions. CSS then sizes to the point at which the entire image is visible.

This example sizes an image to fit the space available in the parent container:

Copy to clipboard
img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

Sign up for Cloudinary free today!


Resize Backgrounds With CSS3

Say you want to resize a background image to better fit an element or your page. The background-size property would come in handy. See the examples below.

Absolute Resizing

Similar to resizing with standard images, absolute resizing changes the background dimensions to match the height and width you specify. Keep in mind that manually setting values also changes the aspect ratio.

To resize backgrounds, specify the width first and then the height. Omitting the height defaults it to auto. For example, the three codelines below produce the same image size, assuming that the image starts as 200px by 200px:

Copy to clipboard
background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

Relative Sizing

Relative sizing works in the same way as absolute resizing, as described above, except that, here, you specify the value for the background-size property instead of the values for height and width. For example:

Copy to clipboard
  background-size: 50% auto;

Maximum Scaling

To automatically resize your background to the maximum that the parent element can hold, specify the contain value—just like what you do for object-fit. The background then automatically tiles to fill any remaining space.

To stop that behavior, add the background-repeat property. However, such a setup leaves any space that cannot be filled with the single-image blank.

Here’s an example:

Copy to clipboard
background-size: contain;
Background-repeat: no-repeat;

Background Filling

To apply an effect similar to contain but with no blank space, specify the cover value to fill the container element of the background but crop off any excess image outside the container, like this:

Copy to clipboard
background-size: cover;

For more ways to transform images in CSS, see our article on CSS’s image effects and filter.

Crop Images Automatically With Cloudinary

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload your images, apply built-in effects, filters, and modifications. You can also resize images automatically, focusing on the most important elements with AI or adapt them to your website design without having to manually crop or scale them.

Additionally, you can transform images programmatically with SDKs or simple URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly to adapt to design changes—a huge convenience and time saver.

Resize and Rescale Images Automatically With Cloudinary

Below are three ways to resize element or background images with Cloudinary’s URL parameters. Each of the sections below links you to the Cloudinary Cookbook page with more details.

Limit Images to Specific Dimensions

To limit the size of an image to certain dimensions, change the crop (c in URLs) value to limit.

Below is an image that’s been resized from 850 x 565 px. to 70 x 70 px. with limit. Due to the preserved aspect ratio, this display is 70 x 47 px.

Ruby:
Copy to clipboard
cl_image_tag("cashew_chicken.jpg", :width=>70, :height=>70, :crop=>"limit")
PHP v1:
Copy to clipboard
cl_image_tag("cashew_chicken.jpg", array("width"=>70, "height"=>70, "crop"=>"limit"))
PHP v2:
Copy to clipboard
(new ImageTag('cashew_chicken.jpg'))
  ->resize(Resize::limitFit()->width(70)->height(70));
Python:
Copy to clipboard
CloudinaryImage("cashew_chicken.jpg").image(width=70, height=70, crop="limit")
Node.js:
Copy to clipboard
cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(70).height(70).crop("limit")).imageTag("cashew_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('cashew_chicken.jpg', {width: 70, height: 70, crop: "limit"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})
React:
Copy to clipboard
<Image publicId="cashew_chicken.jpg" >
  <Transformation width="70" height="70" crop="limit" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cashew_chicken.jpg" >
  <cld-transformation width="70" height="70" crop="limit" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cashew_chicken.jpg" >
  <cl-transformation width="70" height="70" crop="limit">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(70).Crop("limit")).BuildImageTag("cashew_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(70).height(70).crop("limit")).generate("cashew_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(70).setHeight(70).setCrop("limit")).generate("cashew_chicken.jpg")!, cloudinary: cloudinary)
crop limit

Crop Images With Auto Gravity

To focus on certain details—faces, objects, color contrasts—while resizing images, crop the images with Cloudinary's intelligent auto-gravity features. The parameter to set is gravity (g in URLs), which offers an auto value that intelligently crops according to your image’s content.

Cloudinary automatically crops images with content-aware, AI-based features by selecting faces, individual features, or areas of interest. To trigger that task, apply the gravity filter (g) with the features you want to preserve.

This example with the g_auto setting crops the most interesting area, as determined by AI:

auto gravity

Another example: to avoid irrelevant objects instead of the product in product images taking center stage, define the product as the focus. The picture on the right below has the backpack in focus.

Ruby:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", :gravity=>"auto:classic", :height=>175, :width=>175, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:classic", "height"=>175, "width"=>175, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('veducate/spencer-backman-482079-unsplash.jpg'))
  ->resize(Resize::thumbnail()->width(175)->height(175)
    ->gravity(Gravity::autoGravity()
      ->autoFocus(AutoFocus::focusOn(FocusOn::classic()))));
Python:
Copy to clipboard
CloudinaryImage("veducate/spencer-backman-482079-unsplash.jpg").image(gravity="auto:classic", height=175, width=175, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("auto:classic").height(175).width(175).crop("thumb")).imageTag("veducate/spencer-backman-482079-unsplash.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:classic", height: 175, width: 175, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <Transformation gravity="auto:classic" height="175" width="175" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <cld-transformation gravity="auto:classic" height="175" width="175" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="veducate/spencer-backman-482079-unsplash.jpg" >
  <cl-transformation gravity="auto:classic" height="175" width="175" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:classic").Height(175).Width(175).Crop("thumb")).BuildImageTag("veducate/spencer-backman-482079-unsplash.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("auto:classic").height(175).width(175).crop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:classic").setHeight(175).setWidth(175).setCrop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg")!, cloudinary: cloudinary)
g_auto:classic Transformation Applied to It
g_auto:classic
Ruby:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", :gravity=>"auto:backpack", :height=>175, :width=>175, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("veducate/spencer-backman-482079-unsplash.jpg", array("gravity"=>"auto:backpack", "height"=>175, "width"=>175, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('veducate/spencer-backman-482079-unsplash.jpg'))
  ->resize(Resize::thumbnail()->width(175)->height(175)
    ->gravity(Gravity::autoGravity()
      ->autoFocus(AutoFocus::focusOn(FocusOn::backpack()))));
Python:
Copy to clipboard
CloudinaryImage("veducate/spencer-backman-482079-unsplash.jpg").image(gravity="auto:backpack", height=175, width=175, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("auto:backpack").height(175).width(175).crop("thumb")).imageTag("veducate/spencer-backman-482079-unsplash.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("veducate/spencer-backman-482079-unsplash.jpg", {gravity: "auto:backpack", height: 175, width: 175, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <Transformation gravity="auto:backpack" height="175" width="175" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="veducate/spencer-backman-482079-unsplash.jpg" >
  <cld-transformation gravity="auto:backpack" height="175" width="175" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="veducate/spencer-backman-482079-unsplash.jpg" >
  <cl-transformation gravity="auto:backpack" height="175" width="175" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:backpack").Height(175).Width(175).Crop("thumb")).BuildImageTag("veducate/spencer-backman-482079-unsplash.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("auto:backpack").height(175).width(175).crop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:backpack").setHeight(175).setWidth(175).setCrop("thumb")).generate("veducate/spencer-backman-482079-unsplash.jpg")!, cloudinary: cloudinary)
backback
g_auto:backpack

Learn More About Cloudinary

Besides the image-resizing capability, Cloudinary offers a multitude of robust tools for web developers, including the following:

  • Automated image uploads. You can upload images at scale anywhere from a browser, mobile app, or application back-end directly to the cloud.
  • Generous image storage. Cloudinary accords you up to 25 GB free managed, secure, and cloud-based storage space with multiregion backup, revision history, and disaster recovery.
  • Seamless asset management. You can efficiently manage your image library on Cloudinary by performing tasks like searching, organizing, and tagging files; controlling access; and monitoring usage and performance.
  • Effective image transformation. You can transform, enhance, transcode, crop, scale, and enhance images with a URL-based API or with SDKs that support all popular programming languages.
  • Automated image optimization. Cloudinary automatically selects the optimal quality and encoding settings for images, adapts the settings to any resolution or pixel density, and scales or crops images to focus on the important regions.
  • Responsive images. Cloudinary automatically scales images in an art-directed manner, cropping them to fit different resolutions and viewports.
  • Reliable and fast image delivery. Cloudinary delivers images through Content Delivery Networks (CDNs)—Akamai, Fastly, and CloudFront—with no integration or management on your part.

Do give Cloudinary a try. To start, sign up for a free account.

Check Out the Details of CSS Images

Want to learn more about CSS images? These articles are an excellent resource:

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more