参考资料

1. HTML DOM 方法
2. HTML DOM为表格指定规则
3. HTML DOM 返回页面上所有相对链接的基链接 实例
4. HTML DOM 节点列表
5. HTML DOM改变表格边框的宽度
6. HTML DOM 返回图像映射的某个区域的target的值 实例
7. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
8. HTML DOM 返回图像映射的某个区域的protocol 实例

HTML DOM 对image排版

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