js控制html5图片大小

在JavaScript中控制HTML5图片大小通常涉及以下几个基础概念：

基础概念

DOM操作：JavaScript可以通过DOM API来访问和操作HTML元素。
样式控制：可以通过修改元素的style属性来改变其显示样式，包括大小。
事件监听：可以监听用户交互事件（如点击、窗口调整大小等），并据此动态调整图片大小。

类型与应用场景

静态调整：在页面加载时根据预设条件设置图片大小。
动态调整：根据用户交互或窗口大小变化实时调整图片大小。

示例代码

以下是一个简单的示例，展示如何使用JavaScript来控制HTML5图片的大小：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制图片大小示例</title>
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>
</head>
<body>

<img id="myImage" src="example.jpg" alt="示例图片">

<button onclick="resizeImage()">调整图片大小</button>

<script>
function resizeImage() {
  var img = document.getElementById('myImage');
  var width = prompt("请输入新的宽度:");
  var height = prompt("请输入新的高度:");

  if (width && height) {
    img.style.width = width + 'px';
    img.style.height = height + 'px';
  }
}
</script>

</body>
</html>

可能遇到的问题及解决方法

图片变形：当只改变图片的宽度或高度时，可能会导致图片比例失调。解决方法是在调整大小时保持宽高比不变。

function resizeImage() {
  var img = document.getElementById('myImage');
  var width = prompt("请输入新的宽度:");
  
  if (width) {
    img.style.width = width + 'px';
    img.style.height = (img.naturalHeight * width / img.naturalWidth) + 'px';
  }
}