想问问，这种动态的照片应该没有布局

第一张照片是截图，想只显示照片中间的内容。
点进去图二如果照片只有一张照片就按照片大小展示，如果是多张是就按一排三张显示，如图三限制大小，只显示中间部分。
这种应该都怎么布局呀？

img

img

img

css only-child，这个伪类可以帮你实现

保存成html文件，并替换图片路径，运行。OK请给采纳。谢谢

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>图片展示</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .item {
      margin: 10px;
      width: calc(33.33% - 20px);
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="container"></div>
  <script>
    const images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg']; // 假设有4张图片
    const container = document.querySelector('.container');
    if (images.length === 1) {
      const img = new Image();
      img.src = images[0];
      img.onload = function() {
        const width = img.width;
        const height = img.height;
        const item = document.createElement('div');
        item.classList.add('item');
        item.style.width = `${width}px`;
        item.style.height = `${height}px`;
        item.innerHTML = `<img src="${img.src}" alt="">`;
        container.appendChild(item);
      };
    } else {
      images.forEach(image => {
        const item = document.createElement('div');
        item.classList.add('item');
        item.innerHTML = `<img src="${image}" alt="">`;
        container.appendChild(item);
      });
    }
  </script>
</body>
</html>