下面是纯js实现div内图片自适应大小的完整攻略：
实现div内图片自适应大小，需要解决以下两个问题：
因此，我们的实现思路是：
load事件，在图片加载完成后获取其宽度和高度。HTML结构示例：
<div class="container">
<img src="example.jpg" alt="example image">
</div>
CSS样式示例：
.container {
width: 500px;
height: 500px;
}
img {
max-width: 100%;
max-height: 100%;
}
JS代码：
// 获取所有包含图片的容器
const containers = document.querySelectorAll('.container');
// 遍历所有容器
containers.forEach(container => {
// 获取容器和图片对象
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
const img = container.querySelector('img');
// 监听图片的load事件
img.addEventListener('load', () => {
// 获取图片的宽度和高度
const imgWidth = img.width;
const imgHeight = img.height;
// 判断图片宽高比例和容器宽高比例是否相同
const containerRatio = containerWidth / containerHeight;
const imgRatio = imgWidth / imgHeight;
if (containerRatio !== imgRatio) {
// 计算缩放比例
let scaleRatio;
if (imgRatio > containerRatio) {
// 宽度缩放
scaleRatio = containerWidth / imgWidth;
} else {
// 高度缩放
scaleRatio = containerHeight / imgHeight;
}
// 应用缩放
img.style.width = Math.round(imgWidth * scaleRatio) + 'px';
img.style.height = Math.round(imgHeight * scaleRatio) + 'px';
}
});
});
在一个500x500的容器内展示宽度为800px，高度为300px的图片。
HTML代码：
<div class="container">
<img src="example-1.jpg" alt="example image">
</div>
示例在线演示：点击查看
在一个500x500的容器内展示宽度为300px，高度为800的图片。
HTML代码：
<div class="container">
<img src="example-2.jpg" alt="example image">
</div>
示例在线演示：点击查看
本文链接：http://task.lmcjl.com/news/11658.html