参考资料

1. HTML DOM 返回image的替代文本
2. HTML DOM一个单元格的innerHTML
3. HTML DOM document.write() 方法
4. HTML DOM 给image加上border
5. HTML DOM改变下拉列表中被选中的选项的文本
6. HTML DOM 返回文档中第一个锚的 innerHTML
7. HTML DOM 返回和设置链接的href属性实例
8. HTML DOM 修改 HTML 内容

HTML DOM Image 排版

基本介绍

HTML DOM Image 对象代表 HTML 文档中的 <img> 元素，用于在网页中嵌入图像。

主要标签

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

常用属性

• src: 图像路径

• alt: 替代文本

• width: 图像宽度

• height: 图像高度

• title: 提示文本

• loading: 懒加载控制(lazy/eager)

• decoding: 解码方式(async/sync/auto)

基本用法

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

DOM 操作实例

// 创建新图像
var newImg = document.createElement('img');
newImg.src = 'new-image.jpg';
document.body.appendChild(newImg);

// 修改现有图像
var myImg = document.getElementById('myImage');
myImg.src = 'updated-image.jpg';
myImg.alt = '更新后的图片';

CSS 扩展

基础样式

img {
  display: block; /* 或 inline-block */
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}

响应式图像

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

图像效果

/* 圆角图像 */
.rounded {
  border-radius: 50%;
}

/* 阴影效果 */
.shadow {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 悬停效果 */
.hover-effect {
  transition: transform 0.3s;
}
.hover-effect:hover {
  transform: scale(1.05);
}

/* 滤镜效果 */
.filter-effect {
  filter: grayscale(50%) brightness(90%);
}

图像布局

/* 图像居中 */
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 图像网格 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

高级功能

响应式图片

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

懒加载

<img src="image.jpg" loading="lazy" alt="懒加载图片">

图像映射

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

背景图像替代

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
}