We Would Love To Use Cookies

Help us improve our Website. We use cookies to provide you with a user-friendly website and for marketing.

By clicking accept you agree to the terms of our privacy policy and our terms of services, and help us improve our web presence.

We Would Love To Use Cookies

Help us improve our Website. We use cookies to provide you with a user-friendly website and for marketing.

By clicking accept you agree to the terms of our privacy policy and our terms of services, and help us improve our web presence.

Essential Cookies

..are necessary for you to browse our website and use its features, such as accessing secure areas of the site. These cookies are first-party session cookies, and do not provide any information that would make you identifiable.

Functional Cookies

..allow our website to remember choices you have made in the past, like what language you prefer, or what your user name is so you can log in more easily. Generally speaking, they enable us to provide you with a more convenient experience of our website.

Performance Cookies

..collect information about how you use our website, like which pages you visited and which links you clicked on. These cookies are all aggregated and, therefore, anonymized. None of this information can be used to identify you. It is their sole purpose to improve website functions. This includes cookies from third-party analytics services which are for our exclusive use.

Marketing Cookies

..track your online activity and make you identifiable to us. They help us deliver more relevant content to you and therefore improve your user journey. These cookies can share that information with other organizations or advertisers.

How To Scale, Crop, Flip, and Filter an Image in CSS

Learn how to use CSS to perform the most common image processing manipulations.


5 min read
How To Scale, Crop, Flip, and Filter an Image in CSS

In this article, you will learn how to perform popular image processing operations in CSS. That is possible thanks to the several features introduced by CSS3, which allow you to change how the images look to end-users. To learn instead about image manipulation operations for other frameworks, you can head on here: React or vanilla JS.

First, let’s delve into how image manipulation works in CSS. Then, let’s finally see the most common CSS image processing operations in action.

How CSS Image Manipulation Work

CSS does not allow you to deal with files, data formats, or data transformation. In other words, CSS cannot change an image on a deep level, yet with CSS, you can determine how a browser displays elements.

As a result, as opposed to what would happen when using an HTML canvas element, no pixel manipulation will be executed behind-the-scene. Therefore, your CSS rules won't affect the file that represents your image. What changes is how your image is displayed frontend-side.

You can flip, blur, and crop an image in CSS, but when downloading the image with the right-click option, the image saved will always be a copy of the original image file. Read this page from MDN Web Docs, if you want to learn more about this phenomenon.

Prerequisites

The CSS properties you will see are widely based on CSS3 and are not supported by Internet Explorer. To verify if your target browsers support a CSS property, visit MDN Web Docs and explore the Browser compatibility section.

Image Processing in CSS

Let’s look at how to perform scaling, cropping, flipping, and filtering an image in CSS.

Scaling an image with object-fit: scale-down

The object-fit CSS property allows you to define how the content of an HTML <img> element should be resized to fit its container. In particular, scale-down acts as if none or contain were set, depending on which would result in a smaller image.

When it acts like none, the image will keep its original intrinsic size and not be scaled down. On the contrary, when it acts like contain the image will be scaled down to fit the container while maintaining its aspect ratio.

Test this CSS rule in the live demo below:

In particular, this is the CSS rule where the magic happens:

.manipulated-image {
  object-fit: scale-down;
  height: 100px;
}

Cropping an image with object-fit and object-position

By employing object-fit in conjunction with object-position, you can show a part of your image, just if it has been cropped. In detail, the object-position CSS property allows you to specify the positioning of your <img> element within its container box. This happens by passing this CSS property a position parameter containing from one to four values. This parameter is what defines the position of the <img> element.

By using object-fit to set how your <img> element should fit its container and by positioning it with object-position, you can show only a part of your image as shown in the live example below:

This is the CSS rule to look attention to:

.manipulated-image {
  object-fit: cover;
  object-position: -150px -25px;
}

Flipping an image with transform

The transform CSS property is a powerful tool that gives you the ability to rotate, scale, skew, or translate an<img> element. Specifically, you can flip an image by using the scaleX() and scaleY() transformation functions, or by adopting the rotateX() or rotateY() functions.

scaleX() and scaleY() define a transformation that resizes an HTML element along the x-axis and y-axis, respectively. Both accept a number representing the scaling factor as a parameter. Learn how to flip an image vertically with scaleX() in the example below:

In detail, this is the CSS rule to flip an image vertically:

.manipulated-image {
  transform: scaleX(-1);
}

Similarly, rotateX() and rotateY() define a transformation that rotates an HTML element without deforming it around the horizontal axis and vertical axis, respectively. Both require an angle representing the angle of rotation as a parameter. Now, let’s see how to flip an image vertically with rotateY() in the example below:

Specifically, this is what the CSS rule to flip an image vertically looks like:

.manipulated-image {
  transform: rotateY(180deg);
}

Filtering an image with filter

The filter CSS property allows you to apply visual effects on an <img> element. This property provides access to several built-in effects, such as blur(), grayscale(), contrast(), and many others. If required, you can also define your custom image filtering functions.

CSS filters are a powerful tool that is typically used to adjust how an image is displayed by the browser and shown to the end-user. Using them is really easy, as shown in the live demo below:

These are the CSS rules where the filtering operations are defined:

.blurred-image {
  filter: blur(2px);
}
.grayscale-image {
  filter: grayscale(80%);
}
.high-contrast-image {
  filter: contrast(150%);
}

CSS-Only Image Editor vs PhotoEditor SDK

Image manipulation in CSS is an easy and straightforward way to manipulate how an image is displayed with no effort. On the other hand, you cannot save or export the manipulated images with CSS. This means that it is not possible to implement a file image editor based solely on CSS.

Therefore, you can rely on CSS only if you are interested in changing how your images are rendered by the browser. Conversely, if you are looking for a way to manipulate your images and then export them as files, then you need a much more advanced tool. In this case, a commercial solution like IMG.LY’s Photo Editor SDK will provide you with a complete, fast, and easy-to-use image editor.

manipulate-filter-grayscale-blur-image-css-css3

Conclusion

Today we learned how to use CSS to control how browsers display images. In detail, we delved into how to scale, crop, flip, and filter an image in CSS. These represent the most common image manipulation operations and allow you to transform your image CSS-side. As we have learned, these operations only determine how your browser renders an image. They do not change an image as a data structure.
This means that it is not possible to create an image editor that allows users to export manipulated images while using only CSS. So, if this is what you were looking for, you should consider adopting a fast, advanced, and ready-to-use solution – such as PhotoEditorSDK. And you can get right into the PhotoEditorSDK or VideoEditorSDK and its myriad integrations by starting with a free trial over here.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

To stay in the loop with our latest articles and case studies, subscribe to our Newsletter.

Related Articles

FFmpeg - The Ultimate Guide
59 min read
How to Draw on Images in React Native
4 min read
CE.SDK v1.8.0 Release
2 min read
How To Build a Video Player in JavaScript
5 min read
How To Resize Images in Flutter
3 min read

GO TOP