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