Image rendering and orientation

Making sure images display correctly is not only a designer's responsibility, we as web designers and developers also have a say in how images behave and display under particular circumstances.

Let's see how to change the orientation and rendering quality of images with CSS.

image-orientation

The image-orientation CSS property defines the rotation that we can apply to an image, and it looks like this:

image-orientation: flip;

Description

Many images contain information about the settings used to take a picture, such as ISO speed, aperture, shutter speed, camera model, white balance, date and time, and so on. This information is called EXIF Data, and CSS uses this data for image orientation purposes. It also supports ...

Get Web Developer's Reference Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.