CSS object-fit: cover不适用于EXIF方向大于1的JPEG img

基础概念

object-fit: cover 是 CSS 中的一个属性，用于指定元素（如 <img>）的内容应如何调整大小以适应其容器。cover 值会保持图像的宽高比，并将图像缩放以完全覆盖容器，可能会裁剪图像的部分内容。

问题描述

当 JPEG 图像包含 EXIF 方向标签且方向大于 1 时，object-fit: cover 可能无法正确显示图像。这是因为浏览器默认情况下不会考虑 EXIF 方向标签，导致图像显示方向错误。

原因

JPEG 图像中的 EXIF 数据包含了图像的方向信息。方向标签的值从 1 到 8，表示不同的旋转和翻转方向。浏览器在加载图像时，默认不会读取和应用这些方向标签，因此即使设置了 object-fit: cover，图像也可能显示不正确。

解决方法

为了解决这个问题，可以在加载图像之前，使用 JavaScript 读取并应用 EXIF 方向标签。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fix EXIF Orientation</title>
    <style>
        .image-container {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img id="myImage" src="path/to/your/image.jpg" alt="Example Image">
    </div>

    <script>
        function fixExifOrientation(image) {
            EXIF.getData(image, function() {
                var orientation = EXIF.getTag(this, 'Orientation');
                switch (orientation) {
                    case 3:
                        image.style.transform = 'rotate(180deg)';
                        break;
                    case 6:
                        image.style.transform = 'rotate(90deg)';
                        break;
                    case 8:
                        image.style.transform = 'rotate(-90deg)';
                        break;
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            var img = document.getElementById('myImage');
            fixExifOrientation(img);
        });
    </script>
</body>
</html>