基于父级（包装器）宽度的响应式图像源（大小）-解网

问：

鉴于以下代码片段，我的目标是根据父宽度/包装器实现图像（源）相应更改。

<!DOCTYPE html>
<html>
<head>
  <title>Image Size</title>
  <style> div img {max-width: 100%; height: auto;}</style>
</head>
<body>
<div><img src="https://picsum.photos/id/237/1280/720"></div>
<hr/>
<div>1 (159px - different image):</div>
<div style="width: 159px;">
  <img
    src="https://picsum.photos/id/237/1280/720"
    sizes="
     (max-width: 160px) 160px,
     (max-width: 300px) 300px,
     (max-width: 768px) 768px,
     1600px"
    srcset="
    https://picsum.photos/id/275/160/90 160w,
    https://picsum.photos/id/276/300/169 300w,
    https://picsum.photos/id/277/768/432 768w,
    https://picsum.photos/id/278/1600/900 1600w
  "/>
</div>
<div>2 (300px - different image):</div>
<div style="width: 300px;">
  <img src="https://picsum.photos/id/237/1280/720" sizes="(max-width: 160px) 160px, (max-width: 300px) 300px, (max-width: 768px) 768px, 1600px" srcset="https://picsum.photos/id/275/160/90 160w, https://picsum.photos/id/276/300/169 300w, https://picsum.photos/id/277/768/432 768w, https://picsum.photos/id/278/1600/900 1600w">
</div>
<div>3 (768px - different image):</div>
<div style="width: 768px;">
  <img src="https://picsum.photos/id/237/1280/720" sizes="(max-width: 160px) 160px, (max-width: 300px) 300px, (max-width: 768px) 768px, 1600px" srcset="https://picsum.photos/id/275/160/90 160w, https://picsum.photos/id/276/300/169 300w, https://picsum.photos/id/277/768/432 768w, https://picsum.photos/id/278/1600/900 1600w">
</div>
<div>4 (1600px - different image):</div>
<div style="width: 1600px;">
  <img src="https://picsum.photos/id/237/1280/720" sizes="(max-width: 160px) 160px, (max-width: 300px) 300px, (max-width: 768px) 768px, 1600px"  srcset="https://picsum.photos/id/275/160/90 160w, https://picsum.photos/id/276/300/169 300w, https://picsum.photos/id/277/768/432 768w, https://picsum.photos/id/278/1600/900 1600w">
</div>

</body>
</html>

有一个不同的图像 ID 来可视化它。

我阅读了很多关于响应式图像、srcset、大小的解释，似乎响应式图像源严格基于 vw（视图宽度）/ em / rem / px 或根据窗口宽度的计算。我的目标是根据可用 - 父元素宽度加载图像源。换句话说，我正在尝试让图像拉伸到可能的宽度，并在这样做的同时加载适当的大小/分辨率。

有没有JS解决方案？Drupal CMS有一个扩展（drimage），它根据必要的宽度提供/缩放图像。我的偏好是使用标准的 HTML/CSS 解决方案。先谢谢你。

HTML CSS 图像响应

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Image</title>
  <style>
    div {
      max-width: 100%;
    }

    img {
      width: 100%; /* Make the image stretch to its parent element's width */
      height: auto; /* Maintain the aspect ratio */
    }
  </style>
</head>
<body>
  <div>
    <img src="https://picsum.photos/id/237/1280/720" alt="Responsive Image">
  </div>
</body>
</html>

通过将图像的宽度设置为 100%，它将自动调整到其父容器中的可用宽度，使其无需 JavaScript 或 and 属性即可响应。sizessrcset

您可以使用此方法根据可用的父元素宽度加载图像，同时保持响应式设计。

另一个答案是使用 JS 并在移动大小下更改 iamge src

<div id="image-container" style="max-width: 100%;">
  <img id="responsive-image" width="100%" src="https://picsum.photos/id/278/1600/900" alt="Responsive Image">
</div>

<script>
  const imageContainer = document.getElementById('image-container');
  const responsiveImage = document.getElementById('responsive-image');

  // Function to update the image source based on container width
  function updateImageSource() {
    const containerWidth = imageContainer.clientWidth;

    // Determine which image size to load based on container width
    let imageSize;
    if (containerWidth < 160) {
      imageSize = 'https://picsum.photos/id/275/160/90';
    } else if (containerWidth < 300) {
      imageSize = 'https://picsum.photos/id/276/300/169';
    } else if (containerWidth < 768) {
      imageSize = 'https://picsum.photos/id/277/768/432';
    } else {
      imageSize = 'https://picsum.photos/id/278/1600/900';
    }

    responsiveImage.src = imageSize;
  }

  // Call the updateImageSource function when the window is resized
  window.addEventListener('resize', updateImageSource);

  // Initial call to set the image source based on the container width
  updateImageSource();
</script>

感谢您的回复。我实际上是在尝试根据宽度显示不同的图像（源）。代码段中的图像已拉伸到预期的宽度。此外，在使用具有可变布局的CMS系统时，无法设置每个组合。因此，我认为应该有一个解决方案来检查可用宽度，并且由于图像已 100% 拉伸到此宽度，因此会加载正确的图像大小/源。

0赞 Yash Borda 11/3/2023

对于我之前回复中的任何混淆，我深表歉意。听起来您希望根据容器或视口的可用宽度动态加载图像。

上一个：如何修复在移动设备上查看时图片和文本的移动？

下一个：影响 ASP.NET Core 7 MVC 中所有页面的筛选器

基于父级（包装器）宽度的响应式图像源（大小）

Responsive Image Source (Sizes) based on Parent (Wrapper) Width

评论

评论