HTML 响应式图片尺寸答案

【问题标题】：HTML Responsive image sizesHTML 响应式图片尺寸
【发布时间】：2017-11-17 03:14:01
【问题描述】：

我真的在为此苦苦挣扎。我在我的第一个 Web 项目中实现了一个带有响应式图像的响应式画廊（带有列），格式为延迟加载。 760px 后画廊变成 2 列，1365px 3 列，1920px 或更高 4 列。

<img class="lazyload"
                  src="placeholder.jpg"
                  data-srcset="image-360w.jpg 360w,
                               image-512w.jpg 512w,
                               image-750w.jpg 750w"
                  data-src="image-750w.jpg"
                  sizes="(min-width:761px) 50vw,
                         (min-width:1366px) 33.3vw,
                         (min-width:1921px) 25vw"
                  alt="Description">

在“尺寸”中，我在第二列出现的位置设置了一个最小宽度，它可以工作。但其余的，每个列断点的几个最小宽度对我不起作用，它每次加载最大（我没有使用 Retina 显示器，并且在 Safari、Firefox 和 Chrome 中进行了测试）。也许我完全忽略了一些简单的事情，因为我对此很陌生。无论如何，我在想是否可以使用列计数值来计算要加载的图像。像 calc(100vw / column-count) 这样的东西不起作用。我该如何解决这个问题？我缺少关于最小宽度和最大宽度的信息？我应该去脚本吗？

【问题讨论】：

你用的是什么浏览器？
我尝试过使用 Chrome、Firefox 和 Safari。编辑：所有行为都相同。

标签： html

【解决方案1】：

尝试在HTML中使用<picture>标签

<picture>
   <!-- Full HD Resolution -->
   <source srcset="https://placehold.it/1920x1080" media="(min-width: 1920px)" />
   <!-- Samsung Galaxy S7 Edge -->
   <source srcset="https://placehold.it/1442x2562" media="(min-width: 1442px)" />
   <!-- HiDPI Laptop -->
   <source srcset="https://placehold.it/1440x900" media="(min-width: 1440px)" />
   <!-- Common Resolution -->
   <source srcset="https://placehold.it/1366x768" media="(min-width: 1366px)" />
   <!-- 4:3 (Old CRT monitors) -->
   <source srcset="https://placehold.it/1280x1024" media="(min-width: 1280px)" />
   <!-- iPad Pro -->
   <source srcset="https://placehold.it/1024x1366" media="(min-width: 1024px)" />
   <!-- iPad -->
   <source srcset="https://placehold.it/768x1024" media="(min-width: 768px)" />
   <!-- iPhone 6 Plus -->
   <source srcset="https://placehold.it/414x736" media="(min-width: 414px)" />
   <!-- Google Nexus 5X -->
   <source srcset="https://placehold.it/412x732" media="(min-width: 412px)" />
   <!-- iPhone 6 -->
   <source srcset="https://placehold.it/375x667" media="(min-width: 375px)" />
   <!-- iPhone 5 -->
   <source srcset="https://placehold.it/320x568" media="(min-width: 320px)" />
   <!-- If the browser doesn't support "srcset" attribute, then load the default resolution -->
   <img src="https://placehold.it/1366x768" alt="Background"/>
 </picture>

但最好使用CSS制作响应式图片

img {
    background-image: url('path-to-image');
    background-position: 0% 0%;
    background-size: cover;
    width: 100%;
    height: auto;
  }

希望这会有所帮助。

【讨论】：