使用原生js怎么给图片大小

使用原生JS给图片大小的方法包括：设置CSS样式、修改HTML属性、动态调整图片尺寸。

其中，设置CSS样式 是一种常见且灵活的方法，可以通过直接修改图片的宽度和高度来适应各种屏幕和布局需求。接下来，我们将详细介绍如何使用原生JS实现这些方法。

一、设置CSS样式

通过JavaScript直接修改图片的CSS样式，可以很方便地调整图片的大小。

1. 选择图片元素并设置样式

首先，你需要选择需要调整大小的图片元素。可以使用 document.querySelector 或 document.getElementById 方法。然后，使用 style 属性来设置图片的宽度和高度。

// 选择图片元素
const img = document.querySelector('img');
// 设置宽度和高度
img.style.width = '200px';
img.style.height = '150px';

2. 使用百分比调整图片大小

如果你希望图片大小相对于其父元素进行调整，可以使用百分比来设置宽度和高度。

// 选择图片元素
const img = document.querySelector('img');
// 设置宽度和高度为其父元素的50%
img.style.width = '50%';
img.style.height = '50%';

二、修改HTML属性

除了使用CSS样式，你还可以直接修改图片的HTML属性 width 和 height。

1. 使用 `setAttribute` 方法

// 选择图片元素
const img = document.querySelector('img');
// 使用setAttribute方法设置宽度和高度
img.setAttribute('width', '200');
img.setAttribute('height', '150');

2. 直接修改属性

// 选择图片元素
const img = document.querySelector('img');
// 直接修改宽度和高度属性
img.width = 200;
img.height = 150;

三、动态调整图片尺寸

在某些情况下，你可能需要根据窗口的大小或其他动态因素来调整图片的大小。这可以通过监听窗口的 resize 事件来实现。

1. 监听窗口变化事件

// 选择图片元素
const img = document.querySelector('img');
// 监听窗口resize事件
window.addEventListener('resize', () => {
  // 动态设置图片宽度和高度
  const newWidth = window.innerWidth * 0.5;
  const newHeight = window.innerHeight * 0.5;
  img.style.width = `${newWidth}px`;
  img.style.height = `${newHeight}px`;
});

2. 结合媒体查询

你还可以结合媒体查询，通过JavaScript来动态调整图片尺寸。

// 选择图片元素
const img = document.querySelector('img');
// 定义一个函数来调整图片大小
function adjustImageSize() {
  if (window.matchMedia('(max-width: 600px)').matches) {
    img.style.width = '100px';
    img.style.height = '75px';
  } else {
    img.style.width = '200px';
    img.style.height = '150px';
  }
}
// 监听窗口resize事件
window.addEventListener('resize', adjustImageSize);
// 初始调用一次
adjustImageSize();

四、使用Canvas调整图片大小

Canvas元素提供了一种更为灵活的方法来调整图片大小，尤其是在需要对图片进行裁剪或其他图像处理时。

1. 创建Canvas元素

// 创建Canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 选择图片元素
const img = document.querySelector('img');
// 设置Canvas尺寸
canvas.width = 200;
canvas.height = 150;
// 绘制图片到Canvas
img.onload = () => {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  // 将Canvas转换为图片
  const resizedImgSrc = canvas.toDataURL('image/png');
  img.src = resizedImgSrc;
};

2. 动态调整Canvas大小

// 创建Canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 选择图片元素
const img = document.querySelector('img');
// 定义一个函数来调整图片大小
function resizeImage() {
  const newWidth = window.innerWidth * 0.5;
  const newHeight = window.innerHeight * 0.5;
  // 设置Canvas尺寸
  canvas.width = newWidth;
  canvas.height = newHeight;
  // 绘制图片到Canvas
  ctx.drawImage(img, 0, 0, newWidth, newHeight);
  // 将Canvas转换为图片
  const resizedImgSrc = canvas.toDataURL('image/png');
  img.src = resizedImgSrc;
}
// 监听窗口resize事件
window.addEventListener('resize', resizeImage);
// 初始调用一次
resizeImage();

五、响应式设计中的图片大小调整

在响应式设计中，调整图片大小是非常重要的一部分。可以通过结合CSS媒体查询和JavaScript来实现更为灵活的响应式图片大小调整。

1. 使用CSS媒体查询

/* 在CSS中定义不同屏幕尺寸下的图片大小 */
img {
  width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  img {
    width: 100px;
    height: 75px;
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  img {
    width: 200px;
    height: 150px;
  }
}

2. 结合JavaScript实现更复杂的逻辑

// 选择图片元素
const img = document.querySelector('img');
// 定义一个函数来调整图片大小
function adjustImageSize() {
  if (window.matchMedia('(max-width: 600px)').matches) {
    img.style.width = '100px';
    img.style.height = '75px';
  } else if (window.matchMedia('(min-width: 601px) and (max-width: 1200px)').matches) {
    img.style.width = '200px';
    img.style.height = '150px';
  } else {
    img.style.width = '300px';
    img.style.height = '225px';
  }
}
// 监听窗口resize事件
window.addEventListener('resize', adjustImageSize);
// 初始调用一次
adjustImageSize();

六、使用第三方库调整图片大小

在某些情况下，使用第三方库如jQuery也能大大简化图片大小调整的操作。不过，这里我们专注于原生JS的实现，不详细展开。

七、项目管理中的图片处理

在项目管理中，调整图片大小是一个常见的需求，尤其是在需要展示产品原型或设计稿时。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来高效管理项目中的图片处理任务。

1. 使用PingCode管理图片处理任务

PingCode 提供了强大的项目管理功能，可以帮助团队更好地管理图片处理任务。通过其任务分配和进度跟踪功能，团队成员可以清晰地了解每个图片处理任务的进展情况。

2. 使用Worktile协作处理图片

Worktile 是一个通用的项目协作软件，支持团队实时协作处理图片。团队成员可以在Worktile中上传、评论和修改图片，同时通过任务看板清晰地了解每个任务的状态。

综上所述，使用原生JS调整图片大小的方法多种多样，选择合适的方法可以大大提升开发效率和用户体验。在项目管理中，合理使用项目管理工具如PingCode和Worktile，可以更好地组织和协作处理图片相关任务。