| <!DOCTYPE html> | |
| <style> | |
| div.container { | |
| display: inline-block; | |
| margin-right: 20px; | |
| margin-bottom: 10px; | |
| width: 100px; | |
| vertical-align: top; | |
| } | |
| div.square { | |
| width: 100px; | |
| height: 100px; | |
| border: 1px solid black; | |
| } | |
| img { | |
| width: 100px; | |
| height: 100px; | |
| object-fit: contain; | |
| } | |
| </style> | |
| <body> | |
| <b>The images of the <img> elements with object-fit property should be rotated respecting their EXIF orientation.</b> | |
| <br> | |
| <br> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-1-ul.jpg"> | |
| </div> | |
| <br>Normal | |
| </div> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-2-ur.jpg"> | |
| </div> | |
| <br>Flipped horizontally | |
| </div> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-3-lr.jpg"> | |
| </div> | |
| <br>Rotated 180° | |
| </div> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-4-lol.jpg"> | |
| </div> | |
| <br>Flipped vertically | |
| </div> | |
| <br> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-5-lu.jpg"> | |
| </div> | |
| <br>Rotated 90° CCW and flipped vertically | |
| </div> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-6-ru.jpg"> | |
| </div> | |
| <br>Rotated 90° CCW | |
| </div> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-7-rl.jpg"> | |
| </div> | |
| <br>Rotated 90° CW and flipped vertically | |
| </div> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-8-llo.jpg"> | |
| </div> | |
| <br>Rotated 90° CW | |
| </div> | |
| <br> | |
| <div class="container"> | |
| <div class="square"> | |
| <img src="resources/exif-orientation-9-u.jpg"> | |
| </div> | |
| <br>Undefined (invalid value) | |
| </div> | |
| </body> |