### 使用JavaScript实现图片在div或dl中的居中与底部对齐
#### 背景介绍
在网页设计中，图片的布局与位置调整是常见需求之一。为了使页面更加美观和适应不同尺寸的屏幕，经常需要让图片在指定的容器（如`div`或`dl`）内水平垂直居中，并且底部对齐。本文将详细介绍如何通过JavaScript来实现这一功能，并确保该方法在主流浏览器（如Firefox和Internet Explorer）中均能正常工作。
#### 技术要点分析
本例中涉及到的技术要点包括：
1. **CSS样式设置**：通过CSS来定义容器的基本样式。
2. **JavaScript处理**：主要逻辑通过JavaScript实现，包括图片大小调整、位置调整等。
3. **兼容性问题处理**：确保脚本能在不同的浏览器中正常运行。
#### CSS样式详解
通过CSS来定义基本样式。这里的关键在于：
- 设置容器（`div`和`dl`）的尺寸和边框。
- 定义内部元素（如`dt`）的尺寸以及文本对齐方式。
- 使用`overflow`属性控制内容超出时的行为。
- `float`属性用于定位容器。
- 使用伪类`:after`清除浮动，确保布局正确。
```css
#pic{border:1px solid #000; width:800px; height:auto!important; height:300px; min-height:300px; background:#fff}
#picdl{width:215px; height:200px; overflow:hidden; border:1px solid #000; margin:10px; float:left}
#picdt{height:161px; width:209px; overflow:hidden; border:1px solid red; text-align:center}
```
#### JavaScript实现步骤
接下来，通过JavaScript来处理图片的位置与大小调整：
1. **获取元素**：使用`document.getElementById`和`getElementsByTagName`来获取需要操作的元素。
2. **图片尺寸调整**：
- 检查图片的实际尺寸是否大于容器尺寸。
- 如果图片的高度宽度比例不一致，则根据实际情况调整图片尺寸。
3. **图片位置调整**：
- 计算图片与容器之间的高度差，并设置适当的`margin`值以实现底部对齐。
4. **事件监听**：使用`addEventListener`或`attachEvent`来添加事件监听器，确保页面加载完成后执行脚本。
```javascript
function imgsrc() {
this.vh = 161; // 高
this.vw = 209; // 宽
this.addEvent = function (elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
this.init = function () {
var divn = document.getElementById("pic");
var dln = divn.getElementsByTagName("dl");
for (var i = 0; i < dln.length; i++) {
var dtn = dln[i].getElementsByTagName("dt");
var imgn = dtn[0].getElementsByTagName("img");
if (imgn[0].height > this.vh || imgn[0].width > this.vw) {
if (imgn[0].height / this.vh > imgn[0].width / this.vw) {
imgn[0].height = this.vh;
imgn[0].width = this.vh / imgn[0].height * imgn[0].width;
} else {
imgn[0].width = this.vw;
imgn[0].height = this.vw / imgn[0].width * imgn[0].height;
}
}
if (this.vh - imgn[0].height > 0) {
var hh = (this.vh - imgn[0].height) / 2;
imgn[0].style.margin = hh + "px 0px 0px 0px";
}
}
};
}
var imgsrc = new imgsrc();
imgsrc.addEvent(window, "load", imgsrc.init, false);
```
#### 总结
本文详细介绍了如何使用JavaScript来实现图片在`div`或`dl`容器内的居中和底部对齐。通过CSS和JavaScript的结合使用，不仅实现了预期的效果，还确保了代码的兼容性和易维护性。这对于需要处理复杂图片布局的Web开发人员来说是非常有用的技巧。
