js展示多张图片大小

在JavaScript中展示多张图片并控制它们的大小，可以通过HTML和CSS来实现。以下是一个简单的示例，展示如何使用JavaScript动态加载多张图片，并设置它们的最大宽度和高度。

基础概念

HTML: 用于创建网页的结构。
CSS: 用于设置网页元素的样式。
JavaScript: 用于实现网页的交互功能。

类型

静态图片: 直接嵌入HTML中的图片。
动态加载图片: 使用JavaScript动态创建并插入图片元素。

应用场景

相册展示: 在个人网站或社交媒体上展示照片。
产品展示页: 在电商网站上展示商品图片。
新闻网站: 在新闻文章中插入相关图片。

示例代码

以下是一个简单的示例，展示如何使用JavaScript动态加载多张图片，并设置它们的最大宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <style>
        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .image-item {
            max-width: 200px;
            max-height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="image-gallery" class="image-container"></div>

    <script>
        const imageUrls = [
            'path/to/image1.jpg',
            'path/to/image2.jpg',
            'path/to/image3.jpg',
            // 添加更多图片路径
        ];

        const galleryContainer = document.getElementById('image-gallery');

        imageUrls.forEach(url => {
            const imgElement = document.createElement('img');
            imgElement.src = url;
            imgElement.classList.add('image-item');
            galleryContainer.appendChild(imgElement);
        });
    </script>
</body>
</html>

解释

HTML部分:
- 创建一个div元素作为图片容器，并设置其ID为image-gallery。
- 使用CSS设置容器的样式，使其能够水平排列图片，并在需要时换行。

CSS部分:
- 设置.image-container为弹性盒子布局，使其子元素能够自动换行。
- 设置.image-item的最大宽度和高度为200px，并添加一些外边距。
JavaScript部分:
- 定义一个包含图片URL的数组imageUrls。
- 获取图片容器元素。
- 遍历图片URL数组，为每个URL创建一个img元素，设置其src属性，并添加到容器中。