html图片与文字

图片的基本插入方法

在HTML中插入图片使用<img>标签，需指定src属性（图片路径）和alt属性（替代文本）。

<img src="image.jpg" alt="描述性文本" />

• src：支持相对路径（如images/pic.jpg）或绝对路径（如https://example.com/image.png）。
• alt：用于图片无法加载时显示文本，提升SEO和无障碍访问。

图片与文字的排版方式

浮动布局（Float）

通过float: left/right让图片浮动，文字环绕。

img.float-left {
  float: left;
  margin-right: 10px; / 与文字间距 /
}

特点：简单易用，但父元素需清除浮动（如overflow: hidden）。

定位布局（Position）

使用position: absolute/relative控制位置。

.container {
  position: relative;
}
.container img {
  position: absolute;
  top: 10px;
  left: 20px;
}

注意：绝对定位会脱离文档流，可能影响布局。

Flex布局

利用display: flex实现灵活排版。

.flex-container {
  display: flex;
  align-items: center; / 垂直居中 /
}
.flex-container img {
  margin-right: 15px;
}

优势：响应式适配强，代码简洁。

图片尺寸控制

• 固定尺寸：通过width和height属性设置。

  <img src="image.jpg" alt="示例" width="200" height="100" />

• 响应式尺寸：使用CSS控制，保持比例缩放。

  img.responsive {
    max-width: 100%; / 不超过容器宽度 /
    height: auto;    / 自动保持比例 /
  }

图片与文字对齐

• 基线对齐：默认图片底部与文字基线对齐。
• 垂直居中：通过vertical-align: middle调整。

  img.align-middle {
    vertical-align: middle;
  }

• 顶部/底部对齐：使用vertical-align: top/bottom。

常见问题与解决方案

相关问题与解答

问题1：如何让图片在移动端自适应宽度？

解答：使用CSS设置max-width: 100%，并确保图片外部容器宽度随屏幕变化。

img {
  max-width: 100%;
  height: auto;
}

问题2：图片加载失败时如何显示默认图标？

解答：使用onerror事件替换图片，或设置background-color作为备选。

<img src="broken.jpg" alt="示例" onerror="this.src='default