{"id":22211,"date":"2020-11-03T01:35:17","date_gmt":"2020-11-03T01:35:17","guid":{"rendered":"http:\/\/image_resizing_manually_with_css_and_automatically_with_cloudinary"},"modified":"2025-02-21T14:16:29","modified_gmt":"2025-02-21T22:16:29","slug":"image_resizing_manually_with_css_and_automatically_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary","title":{"rendered":"Image Resizing: Manually With CSS and Automatically With Cloudinary"},"content":{"rendered":"

With Cascading Style Sheets (CSS)<\/a>, 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.<\/p>\n

In CSS, specific properties such as background-size<\/code> with the value cover<\/code> 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<\/code> 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.<\/p>\n

Another important aspect is the use of the width<\/code> attribute, which can be set relative to the parent container. This ensures uniform dimensions of images on all devices. Combining width: auto;<\/code> with max-height: 100%;<\/code> can prevent distortions in the image while respecting its original proportions. It\u2019s worth noting that while the max-width<\/code> and max-height<\/code> properties are highly effective, they may not be supported in all browsers, which is an important consideration for cross-browser compatibility.<\/p>\n

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.<\/p>\n

This is part of a series of articles about Bulk Image Resize<\/a>.<\/p>\n

Here are the topics:<\/p>\n