js图片自适应宽度高度

基础概念

JavaScript 图片自适应宽度和高度是指根据显示容器的大小自动调整图片的尺寸，以确保图片在不同设备和屏幕尺寸上都能正确显示。

类型

固定宽高比：保持图片的宽高比不变，根据容器大小调整尺寸。
完全自适应：图片完全填充容器，可能会改变宽高比。

应用场景

网站首页：确保主图在不同设备上都能完美展示。
产品列表：商品图片需要适应不同屏幕尺寸。
社交媒体分享：图片在不同社交平台上都能正确显示。

示例代码

以下是一个简单的示例，展示如何使用JavaScript实现图片自适应宽度和高度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Resize</title>
    <style>
        .container {
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            position: relative;
        }
        .responsive-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* or 'contain' depending on your needs */
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="your-image.jpg" alt="Responsive Image" class="responsive-img">
    </div>

    <script>
        function resizeImage() {
            const container = document.querySelector('.container');
            const img = document.querySelector('.responsive-img');

            img.style.width = container.clientWidth + 'px';
            img.style.height = container.clientHeight + 'px';
        }

        window.addEventListener('resize', resizeImage);
        window.addEventListener('load', resizeImage);
    </script>
</body>
</html>

遇到的问题及解决方法

问题1：图片加载时出现闪烁

原因：图片在加载时尺寸未正确设置，导致页面布局重新计算。

解决方法：

使用CSS设置初始尺寸。
在图片加载完成后调整尺寸。

img.onload = function() {
    resizeImage();
};

问题2：图片在不同设备上显示不一致

原因：不同设备的像素密度不同，导致图片显示效果不一致。

解决方法：

使用srcset属性提供不同分辨率的图片。
使用CSS媒体查询调整图片尺寸。

<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="Responsive Image">

通过以上方法，可以有效解决图片自适应宽度和高度时遇到的常见问题，确保图片在不同设备和屏幕尺寸上都能正确显示。