参考资料

1. HTML DOM 根节点childNodes 和 nodeValue
2. HTML DOM document.write() 方法
3. HTML DOM为表格指定规则
4. HTML DOM获得有下拉列表的表单的ID
5. HTML DOM 返回图像映射的某个区域的shape 实例
6. HTML DOM 修改
7. HTML DOM 返回一个客户端图像映射的usemap的值
8. HTML DOM 对iframe排版

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。