js extImage 图片自动缩放大小
你可以使用JavaScript和CSS来实现图片自动缩放大小的效果。下面是一种实现的方式：
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
max-width: 100%; /* 设置图片容器的最大宽度为100% */
height: auto; /* 设置图片容器的高度为自适应 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
</div>
<script>
window.addEventListener('load', function() {
var imageContainer = document.querySelector('.image-container');
var image = imageContainer.querySelector('img');
// 获取图片的原始宽度和高度
var originalWidth = image.naturalWidth;
var originalHeight = image.naturalHeight;
// 计算图片的缩放比例
var containerWidth = imageContainer.offsetWidth;
var containerHeight = imageContainer.offsetHeight;
var widthRatio = containerWidth / originalWidth;
var heightRatio = containerHeight / originalHeight;
var scaleRatio = Math.min(widthRatio, heightRatio);
// 设置图片的缩放大小
image.style.width = (originalWidth * scaleRatio) + 'px';
image.style.height = (originalHeight * scaleRatio) + 'px';
});
</script>
</body>
</html>
在上面的代码中，我们首先创建了一个图片容器的div元素，并设置了容器的最大宽度为100%以及高度为自适应。然后，我们使用JavaScript在页面加载完成后获取图片的原始宽度和高度，并计算出缩放比例。最后，我们使用CSS的width和height属性将图片的大小设置为原始大小乘以缩放比例。
请将代码中的your-image.jpg替换为你自己的图片路径。
原文地址: https://www.cveoy.top/t/topic/i4bi 著作权归作者所有。请勿转载和采集!