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.
The
image-orientation CSS property defines the rotation that we can apply to an image, and it looks like this:
image-orientation: flip;
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 one or two values in a single declaration.
The image-orientation property supports two keyword values and an angle value: from-image, flip, and an angle value.
from-image: The image is rotated using the EXIF Data contained in the image.flip: The image...