Skip to content

Instantly share code, notes, and snippets.

@helephant
Last active January 23, 2019 17:30
Show Gist options
  • Save helephant/b48eaa8f9355f4fc19b71da31452fdea to your computer and use it in GitHub Desktop.
Save helephant/b48eaa8f9355f4fc19b71da31452fdea to your computer and use it in GitHub Desktop.
CSS rotation on exif images

Exif rotation in browsers is a journey of disappointment. The definitive guide on the history of it is quite an interesting read. There's also a current state of the world round-up written in 2012, which is pretty much still the same in 2019.

Firefox supports a CSS attribute that tells the browser to respect exif rotation, but no other browser respects it. There's been a Chrome ticket open to fix it for about five years now.

This is a little proof of concept to try to fix the issue with CSS transforms. We didn't end up using it because we had the images in other elements that were already rotated themselves, so we felt like this would probably cause more problems than it solved. But who knows, maybe it will be useful some time! We decided it would be better to just process the images on the server instead.

The trick to getting it to work is to put your images in another container with a width and height set on it. This reserves the space the image will need in the document's flow when it is in it's correct rotation.

<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<style type="text/css">
img {
-webkit-image-orientation: from-image;
border: 3px red solid;
}
.rotate-90 {
transform: translateY(-100%) rotateZ(90deg);
transform-origin: left bottom;
}
.rotate-180 {
transform: rotate(180deg);
}
.rotate-270 {
transform: rotate(-90deg) translatex(-100%);
transform-origin: top left;
}
.landscape-container {
width: 600px;
height: 450px;
display: inline-block;
border: 3px blue solid;
background: grey;
}
.portrait-container {
width: 450px;
height: 600px;
display: inline-block;
border: 3px blue solid;
background: grey;
}
</style>
</head>
<body>
<h2>Landscape</h2>
<picture class="landscape-container">
<img src="landscape_1.jpg">
</picture>
<picture class="landscape-container">
<img src="landscape_3.jpg" class="rotate-180">
</picture>
<picture class="landscape-container">
<img src="landscape_6.jpg" class="rotate-90">
</picture>
<picture class="landscape-container">
<img src="landscape_8.jpg" class="rotate-270">
</picture>
<h2>Portrait</h2>
<picture class="portrait-container">
<img src="portrait_1.jpg">
</picture>
<picture class="portrait-container">
<img src="portrait_3.jpg" class="rotate-180">
</picture>
<picture class="portrait-container">
<img src="portrait_6.jpg" class="rotate-90">
</picture>
<picture class="portrait-container">
<img src="portrait_8.jpg" class="rotate-270">
</picture>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment