js实现图片宽为屏幕宽，高度自适应

小奋斗♛

于 2024-06-30 16:22:52 发布

阅读量410

点赞数 2

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_72684019/article/details/140082572

版权

1、需求

图片的宽度始终等于屏幕的宽度；
图片的高度随屏幕的变化等比例变化。

2、效果

3、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片加载完成后设置高度</title>
    <style>
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .imgItem {
        width: 100%;
      }
      .imgItem img {
        width: 100%;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="imgItem">
        <img
          id="responsiveImg"
          src="../assets/0002.jpeg"
          alt="Responsive Image"
        />
      </div>
    </div>

    <script>
      // 等待DOM加载完毕
      document.addEventListener("DOMContentLoaded", function () {
        const img = document.getElementById("responsiveImg");

        // 图片加载完成后设置高度
        img.onload = function () {
          setImgSize(img);
        };

        // 窗口大小变化时更新图片大小
        window.addEventListener("resize", function () {
          setImgSize(img);
        });

        function setImgSize(img) {
          // 设置图片宽度为屏幕宽度
          img.style.width = window.innerWidth + "px";
          // 计算并设置图片高度以保持宽高比
          img.style.height =
            (img.naturalHeight / img.naturalWidth) * window.innerWidth + "px";
        }
      });
    </script>
  </body>
</html>