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.
In CSS, specific properties such as
background-size with the value
cover can be used to effectively resize the background images of div elements. This method ensures that the background image covers the entire area of the div, adjusting itself proportionally. Additionally, the
max-width property, when set to 100%, allows images to adjust their size while maintaining the aspect ratio, fitting perfectly within their parent container. This approach is particularly useful for responsive design, ensuring that images look consistent across different devices.
Another important aspect is the use of the
width attribute, which can be set relative to the parent container. This ensures uniform dimensions of images on all devices. Combining
width: auto; with
max-height: 100%; can prevent distortions in the image while respecting its original proportions. It’s worth noting that while the
max-height properties are highly effective, they may not be supported in all browsers, which is an important consideration for cross-browser compatibility.
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
- Resize backgrounds with CSS3
- Crop images automatically with Cloudinary
- Resize and rescale images automatically with Cloudinary
- Learn more about Cloudinary
- Check out the details of CSS images
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
width properties you desire.
With absolute resizing, you specify the
width values along with the static ones in pixels (
px), ems (
em), or another absolute-size format. See this example:
To retain the aspect ratio, statically modify either the
width value and set
auto for the other property to enable automatic sizing, as in this example:
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:
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.
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:
background-size: 100px 100px;
background-size: 100px auto;
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
width. For example:
background-size: 50% auto;
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:
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:
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.
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.
To limit the size of an image to certain dimensions, change the
c in URLs) value to
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.
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:
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.
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.
Want to learn more about CSS images? These articles are an excellent resource:
- Working With CSS Images
- CSS Image Overlay: Overlaying Text and Images for Visual Effect
- Image Resizing: Manually With CSS and Automatically With Cloudinary
- CSS Image Effects: Five Simple Examples and a Quick Animation Guide
- Creating Image-Filter Effects With CSS and Riveting Transformations