HTML 图像

HTML 图像

基本介绍

HTML 图像是通过 <img> 标签在网页中嵌入的图形元素。支持多种格式如 JPEG、PNG、GIF、SVG 等。

主要标签

<img> 标签是自闭合标签，主要属性：

• src：指定图像路径（必需）

• alt：替代文本（必需）

• width：图像宽度（像素或百分比）

• height：图像高度（像素或百分比）

• loading：控制懒加载（"lazy"或"eager"）

基本用法

<img src="image.jpg" alt="描述文字" width="300" height="200">

功能特性

1. 响应式图像：通过 srcset 和 sizes 属性

<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
     src="medium.jpg" alt="响应式图像示例">

2. 图片映射：使用 <map> 和 <area> 创建可点击区域

<img src="planets.jpg" alt="行星" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="太阳">
  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="水星">
</map>

CSS 扩展

1. 基本样式控制：

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}

2. 滤镜效果：

img {
  filter: grayscale(50%) blur(1px);
}

3. 悬停效果：

img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

4. 响应式图像：

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

5. 背景图像（通过 CSS）：

div {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

6. 对象适配：

img {
  object-fit: cover;
  object-position: 50% 50%;
}