html图片自适应屏幕大小

wakangda

已于 2023-09-19 10:38:54 修改

阅读量9.6k

点赞数 9

分类专栏：网页文章标签：图片自适应背景图片自适应 box-size

于 2019-08-14 11:17:02 首次发布

本文链接：https://blog.csdn.net/weixin_42657666/article/details/99546425

版权

网页专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如何根据不同分辨率适配图片大小（使用CSS3的background-size属性）

在开发网页时，我们经常会遇到需要根据不同分辨率的手机适配图片大小的情况。这篇文章将介绍如何使用CSS3的background-size属性来实现这个目标。

问题描述

首先，让我们来看一下具体的问题。我们有一个UI给定的图片，它的大小是固定的。我们希望根据不同分辨率的手机屏幕，动态地调整图片的大小，以便在手机上能够完整显示。

下面是给定的图片示例：

示例图片

解决方案

我们可以使用CSS3的background-size属性来实现图片的适配。首先，我们需要设置背景图，并将其宽度设置为100%，高度设置为固定值。然后，我们可以通过一些JavaScript代码来获取浏览器窗口的宽度，并根据宽度计算出图片应该显示的高度。最后，将图片的高度设置为计算得出的值即可。

以下是详细的解决方案步骤：

首先，在HTML文件中添加一个<div>元素，并指定一个唯一的ID作为其标识符。这个<div>将用于显示背景图片。

<div id="bgImg"></div>

在CSS文件中，为这个<div>设置背景图、宽度和高度，并使用background-size: 100% 100%来保持图像的比例不变。

#bgImg {
  width: 100%;
  height: 2703px;
  background-image: url("./index.png");
  background-size: 100% 100%;
}

然后，在JavaScript代码中，使用以下函数来获取浏览器窗口的宽度：

function getClientWidth() {
  var clientWidth = 0;
  if (document.body.clientWidth && document.documentElement.clientWidth) {
    clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
  } else {
    clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
  }
  return clientWidth;
}

接下来，在window的onload事件中，添加以下代码来动态设置背景图的高度：

window.onload = function() {
  var bgImg = document.getElementById('bgImg');
  bgImg.style.height = getClientWidth() * 2703 / 1920 + 'px';
}

最后，将所有代码放到一个HTML文件中，并引入相应的CSS和JavaScript文件。

示例代码

<!DOCTYPE html>
<html>

<head>
  <style>
    #bgImg {
      width: 100%;
      height: 2703px;
      background-image: url("./index.png");
      background-size: 100% 100%;
    }
  </style>
</head>

<body>
  <div id="bgImg"></div>

  <script>
    function getClientWidth() {
      var clientWidth = 0;
      if (document.body.clientWidth && document.documentElement.clientWidth) {
        clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
      } else {
        clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
      }
      return clientWidth;
    }

    window.onload = function() {
      var bgImg = document.getElementById('bgImg');
      bgImg.style.height = getClientWidth() * 2703 / 1920 + 'px';
    }
  </script>
</body>

</html>

还可以通过css简单设置

当然，还有其他更简单的方法来实现图片适配不同分辨率的手机。下面列举了两种常用的方法：

1. 使用CSS的background-size属性并设置cover值

#bgImg {
  width: 100%;
  height: 100%;
  background-image: url("./index.png");
  background-size: cover;
}

这种方法使用background-size: cover来自动调整背景图的大小，使其完全覆盖整个元素。这样可以确保背景图在任何分辨率下都能适应，并且不会变形。但需要注意的是，可能会有部分图像被裁剪掉。

2. 使用CSS的object-fit属性

#bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这种方法使用object-fit: cover来自动调整元素的内容（包括图像）的大小，并使其完全覆盖元素。与上述方法类似，它也可以保证图像在各种分辨率下适应，并且不会变形。同样地，可能会有部分图像被裁剪掉。

这两种方法都比较简单，只需要添加少量的CSS代码即可实现图片适配不同分辨率的手机。选择哪种方法取决于你的具体需求和对图片显示效果的要求。在实际开发中，可以根据具体情况选择最适合的方法。
！