图像的宽高设置

图像宽高基础概念

图像宽高决定了元素在页面中的显示尺寸。HTML中可通过多种方式控制图像尺寸，最基础的是width和height属性：

<img src="example.jpg" width="300" height="200" alt="示例图片">

这两个属性接受像素值（无需单位）或百分比。现代开发更推荐使用CSS控制尺寸，但HTML属性仍具有初始布局优势。

HTML属性设置方法

直接在<img>标签中设置宽高是最传统的方式：

<!-- 固定像素值 -->
<img src="logo.png" width="150" height="150">

<!-- 百分比（相对于父容器） -->
<img src="banner.jpg" width="100%" height="auto">

重要特性：

• 只设置宽度时高度会自动按比例调整
• 同时设置宽高可能导致图像变形
• 百分比基于父元素计算

CSS样式控制方案

CSS提供了更灵活的尺寸控制方式：

/* 基础尺寸设置 */
img.responsive {
  width: 100%;
  height: auto;
}

/* 最大宽度限制 */
.thumbnail {
  max-width: 200px;
}

/* 视口单位 */
.hero-image {
  width: 100vw;
  height: 50vh;
}

响应式图像实践

现代网页需要适应不同设备，推荐方案：

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" style="width:100%;height:auto;">
</picture>

结合sizes属性实现更精确控制：

<img srcset="small.jpg 480w, medium.jpg 1024w"
     sizes="(max-width: 600px) 480px, 1024px"
     src="fallback.jpg">

宽高比锁定技术

保持特定比例的关键技术：

.aspect-ratio {
  position: relative;
  padding-bottom: 56.25%; /* 16:9比例 */
}

.aspect-ratio img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML原生方案：

<img src="video-thumbnail.jpg" width="16" height="9" loading="lazy">

性能优化考量

不当的尺寸设置会导致性能问题：

<!-- 不好：浏览器需要下载大图再缩放 -->
<img src="huge-image.jpg" width="100">

<!-- 推荐：直接提供合适尺寸的图片 -->
<img src="optimized-image.jpg" width="100" height="100">

使用srcset配合w描述符：

<img srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     src="medium.jpg">

动态调整方案

JavaScript动态控制示例：

function resizeImages() {
  document.querySelectorAll('img.adaptive').forEach(img => {
    const container = img.parentElement;
    img.style.width = `${container.offsetWidth}px`;
  });
}

window.addEventListener('resize', resizeImages);

CSS容器查询新特性：

@container (min-width: 500px) {
  .card img {
    width: 100%;
    height: 200px;
  }
}

特殊场景处理

背景图像尺寸控制：

.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  width: 100%;
  height: 400px;
}

SVG图像的特殊处理：

<svg width="200" height="100" viewBox="0 0 20 10">
  <rect width="20" height="10" fill="#3498db"/>
</svg>

跨设备适配策略

针对高DPI设备的处理：

<img src="standard.png"
     srcset="retina.png 2x"
     width="200" height="100">

结合媒体查询的CSS方案：

@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .high-dpi {
    background-image: url('image@2x.jpg');
    background-size: contain;
  }
}

常见问题解决方案

图像变形修复：

.fixed-ratio {
  width: 300px;
  height: 200px;
  object-fit: contain; /* 或 cover */
}

占位空间保持：

<div class="image-wrapper" style="width:300px;height:200px;">
  <img src="loading.gif" data-src="actual.jpg" 
       style="width:100%;height:100%;object-fit:cover;">
</div>