图像的宽高设置

图像宽高基础概念

在HTML中，图像的宽高设置直接影响页面布局和用户体验。通过width和height属性可以精确控制图像显示尺寸，这两个属性值通常以像素(px)为单位，但也可以使用百分比等相对单位。

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

当只设置宽度或高度之一时，浏览器会自动按原图比例计算另一个维度。例如设置width="300"但不指定height，图像高度会按原始比例自动调整。

HTML属性设置方法

最直接的宽高设置方式是通过img标签的width和height属性：

<!-- 固定像素值 -->
<img src="photo.png" width="400" height="300">

<!-- 百分比相对父容器 -->
<img src="photo.png" width="50%">

<!-- 只设置宽度，高度自动 -->
<img src="photo.png" width="250">

需要注意HTML属性设置的宽高会直接影响图像在页面中的占据空间，即使CSS同时设置了不同值，HTML属性仍会保留"占位"作用。

CSS样式控制方式

通过CSS可以更灵活地控制图像尺寸，常用方法包括：

/* 类选择器 */
.responsive-img {
  width: 100%;
  height: auto;
}

/* ID选择器 */
#banner-image {
  width: 800px;
  max-height: 400px;
}

/* 属性选择器 */
img[src$=".jpg"] {
  max-width: 100%;
}

内联样式写法：

<img src="logo.svg" style="width: 120px; height: auto;">

响应式图像设计

实现图像自适应需要考虑多种场景：

<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>

结合CSS的object-fit属性可以处理不同比例图像的显示问题：

.cover-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

性能优化考虑

不恰当的宽高设置会导致图像变形或加载问题：

<!-- 避免这种拉伸变形 -->
<img src="portrait.jpg" width="300" height="300" style="object-fit: contain;">

<!-- 预占位防止布局偏移 -->
<img src="lazy-load.jpg" width="1600" height="900" loading="lazy">

建议始终在HTML中指定原始宽高比例：

<img src="product.png" 
     width="600" 
     height="400"
     style="max-width: 100%; height: auto;">

特殊场景处理

处理图标和SVG时需要特别注意：

<!-- SVG内联示例 -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L4 12l8 10 8-10z"/>
</svg>

<!-- 背景图像尺寸控制 -->
<div style="
  background-image: url('pattern.png');
  background-size: contain;
  width: 100%;
  height: 200px;
"></div>

浏览器渲染差异

不同浏览器对某些特殊情况的处理可能不同：

/* 解决Safari中SVG缩放问题 */
svg {
  max-width: 100%;
  height: auto;
  -webkit-tap-highlight-color: transparent;
}

表格中图像的尺寸控制示例：

<table>
  <tr>
    <td style="width: 150px;">
      <img src="thumbnail.jpg" style="width: 100%;">
    </td>
  </tr>
</table>

移动端适配技巧

针对移动设备的优化方案：

<!-- 高清屏显示优化 -->
<img src="image@2x.jpg" 
     srcset="image@1x.jpg 1x, image@2x.jpg 2x"
     width="200" 
     height="100"
     alt="响应式图像">

结合媒体查询的CSS方案：

@media (max-width: 480px) {
  .mobile-img {
    width: 100vw;
    height: calc(100vw * 9/16);
    margin-left: -15px;
  }
}