js控制图片显示比例

在JavaScript中控制图片的显示比例通常涉及到对图片元素的尺寸进行调整，以确保图片按照特定的宽高比进行显示。以下是一些基础概念和相关方法：

基础概念

宽高比（Aspect Ratio）：图片宽度与高度的比例。
CSS样式：用于控制HTML元素的布局和外观。
JavaScript事件处理：允许脚本响应用户操作或浏览器事件。

类型与应用场景

固定宽高比：适用于需要保持特定比例的图片，如海报、画作等。
响应式设计：适用于网站和应用程序，可以根据屏幕大小自动调整图片尺寸。

示例代码

以下是一个简单的示例，展示如何使用JavaScript和CSS来控制图片的显示比例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Aspect Ratio Control</title>
<style>
  .container {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    position: relative;
  }
  .container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并裁剪 */
  }
</style>
</head>
<body>

<div class="container">
  <img id="responsive-image" src="example.jpg" alt="Responsive Image">
</div>

<script>
  function setImageAspectRatio(imageElement, width, height) {
    const aspectRatio = width / height;
    const container = imageElement.parentElement;
    const containerWidth = container.clientWidth;
    const containerHeight = containerWidth / aspectRatio;

    imageElement.style.width = '100%';
    imageElement.style.height = `${containerHeight}px`;
  }

  window.addEventListener('resize', () => {
    const img = document.getElementById('responsive-image');
    setImageAspectRatio(img, 16, 9); // 设置为16:9宽高比
  });

  // 初始化设置
  const img = document.getElementById('responsive-image');
  setImageAspectRatio(img, 16, 9);
</script>

</body>
</html>