参考资料

1. HTML DOM对单个单元格的内容水平对齐
2. HTML DOM 返回一个表单acceptCharset属性的值
3. HTML DOM 修改 HTML 内容
4. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
5. HTML DOM 返回一个button的type 实例
6. HTML DOM 返回文档的完整的URL实例
7. HTML DOM 返回图像映射某个区域的替代文字实例
8. HTML DOM 返回和设置一个iframe中的scrolling属性的值

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