相对宽度和高度图像反应原生 - Javascript

简介

在网页设计中，始终有一个常见的问题：如何使图像对于父容器的尺寸变化作出反应。如果父容器的大小变化，应该如何调整图像的大小、位置、比例以保持良好的布局呢？相对宽度和高度图像是一种解决方案。在本篇文章中，我们将介绍如何使用JavaScript来实现相对宽度和高度图像反应原生。

实现

在介绍具体的实现方法之前，需要了解几个基本概念。

1. offsetWidth 和 offsetHeight

offsetWidth和offsetHeight属性分别获取元素的宽度和高度，包括元素的边框、padding和滚动条，但不包括边框外的margin。

2. naturalWidth和naturalHeight

naturalWidth和naturalHeight属性获取图像的原始宽度和高度。

有了这些基本概念，我们可以开始实现相对宽度和高度图像反应原生。

实现步骤

1. 获取图片元素

const img = document.querySelector('#img');

这里我们假设图片元素的id为 img。

2. 添加事件监听器

监听浏览器窗口的 resize 事件。

window.addEventListener('resize', onResize);

3. 编写事件处理函数

function onResize() {
  const parentWidth = img.parentElement.offsetWidth;
  const parentHeight = img.parentElement.offsetHeight;
  const naturalWidth = img.naturalWidth;
  const naturalHeight = img.naturalHeight;

  const aspectRatio = naturalWidth / naturalHeight; // 图片本身的长宽比
  const parentAspectRatio = parentWidth / parentHeight; // 父容器的长宽比

  if (aspectRatio >= parentAspectRatio) {
    // 图片宽度填满父容器
    img.style.width = '100%';
    img.style.height = '';
  } else {
    // 图片高度填满父容器
    img.style.width = '';
    img.style.height = '100%';
  }
}

事件处理函数先获取父容器的宽度和高度，以及图片的原始宽度和高度。然后计算图片本身的长宽比和父容器的长宽比，根据比较结果设置图片的宽度和高度。

根据本身长宽比与父容器长宽比的比较结果，若图片的长宽比大于等于父容器的长宽比，则设置图片的宽度为 100%，高度自适应；否则，设置图片的高度为 100%，宽度自适应。

4. 初始化

在初始化时调用事件处理函数，以保证图片正确地布局。示例代码如下：

window.addEventListener('DOMContentLoaded', () => {
  onResize();
});

总结

通过使用JavaScript实现相对宽度和高度图像反应原生，我们可以轻松地实现图片对于父容器的尺寸变化作出反应，避免布局错乱的问题。这种方法不仅适用于图片，还适用于其他元素，比如视频等等。