js里图片居中格式大小怎么调

在JavaScript中调整图片的居中、格式和大小的方法有多种，包括使用CSS样式、DOM操作等。 首先，你可以使用CSS来设置图片的居中和大小，然后使用JavaScript动态调整这些属性。

一、CSS样式设置

在调整图片的居中和大小时，CSS是一个非常有效的工具。以下是一些常用的方法：

1. 使用CSS居中图片

水平居中： 使用 text-align 属性。
垂直居中： 使用 flexbox 或 position 属性。

/* 水平居中 */
.container {
  text-align: center;
}
/* 垂直居中 - Flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器占满整个视口高度 */
}
/* 垂直居中 - Position */
.container {
  position: relative;
  height: 100vh;
}
.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 调整图片大小

固定大小： 使用 width 和 height 属性。
自适应大小： 使用 max-width 和 max-height 属性。

/* 固定大小 */
img {
  width: 300px;
  height: 200px;
}
/* 自适应大小 */
img {
  max-width: 100%;
  height: auto;
}

二、JavaScript动态调整

有时你可能需要使用JavaScript动态调整图片的居中和大小。以下是一些常用的方法：

1. 获取图片和容器元素

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

2. 动态设置图片大小

// 设置固定大小
img.style.width = '300px';
img.style.height = '200px';
// 设置自适应大小
img.style.maxWidth = '100%';
img.style.height = 'auto';

3. 动态调整居中

// 使用Flexbox居中
container.style.display = 'flex';
container.style.justifyContent = 'center';
container.style.alignItems = 'center';
// 使用Position居中
img.style.position = 'absolute';
img.style.top = '50%';
img.style.left = '50%';
img.style.transform = 'translate(-50%, -50%)';

三、结合CSS和JavaScript

有时你需要结合使用CSS和JavaScript来实现更复杂的布局和调整。

1. 定义CSS类

/* CSS类 */
.center-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.responsive-img {
  max-width: 100%;
  height: auto;
}

2. 使用JavaScript动态添加类

// 动态添加类
img.classList.add('center-img', 'responsive-img');

四、实际应用示例

以下是一个完整的示例，展示了如何使用CSS和JavaScript动态调整图片的居中和大小。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>图片居中和大小调整</title>
</head>
<body>
  <div class="container">
    <img src="image.jpg" alt="Sample Image" id="myImage">
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.container {
  position: relative;
  height: 100vh;
}
.center-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.responsive-img {
  max-width: 100%;
  height: auto;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
  const img = document.getElementById('myImage');
  img.classList.add('center-img', 'responsive-img');
});

通过上述方法，你可以轻松实现图片的居中和大小调整。使用CSS样式和JavaScript动态调整相结合的方法，可以让你在各种场景下灵活地控制图片的显示效果。