我真的很挣扎。我正在我的第一个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 /列数）这样的东西不起作用。我怎么解决这个问题？关于最小宽度和最大宽度的东西我不见了？我应该去剧本吗？
答案 0 :(得分：-1)
尝试在.as-console-wrapper { max-height: 100% !important; top: 0; }
<picture>标记
HTML但最好使用<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希望这有帮助。