Cloudinary Blog

Blog posts of 'Padding' tag
Auto padding images with content-aware color padding

How you present the content of your website can be just as important as the content itself. The images you display need to conform to the graphic design of your site, and every image needs to fit within a predefined size. Although that may be simple enough to achieve when you are dealing with your own images, the task can be more challenging when displaying images uploaded by your users.

Your users could potentially upload their images in a variety of resolutions and sizes. This means you need to adjust the images on-the-fly to fit within the available space defined by your graphic design. However, for images that are uploaded with a different aspect ratio than the area reserved to display it, a simple scaled resize will result in extra space either above and below the image or on the left and right. It also could affect the spacing of other elements on your page. To make sure you end up with an image that is the right size to fill all of the available space, you will generally need to add padding to the image as well, either using CSS or by manipulating the original image.

Read more