html - 响应式图像、srcset 和尺寸

Question

我开始使用响应式图像，但我有一点疑问。

我有一个图标。我网站上的这个图标总是有两种尺寸：一个小版本，74 像素宽，一个大版本，94 像素宽。

<img alt="Sezione Gino" style="background-color: #dd0505" srcset="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=1&amp;q=75 1x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=2&amp;q=50 2x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=3&amp;q=35 3x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=4&amp;q=23 4x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=5&amp;q=20 5x" sizes="94px" src="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress">

我使用 imgix 为大图标创建了这个 srcset。我检查了图像，它们以正确的方式调整大小，1x 是 94 像素宽，2x 是 188 像素宽。

我固定了 94 的大小，因为在大版本中，图像总是 94px。

现在我的问题是：对于 74 像素版本，所以小图标，我必须使用 74 像素的大小重新创建集合？

标签： htmlresponsive-designimgix

Answer 1

是的，您必须重新创建集合。

如果它们是相同的图标，您可以复制并粘贴并替换w=94为w=74，但您可能还必须调整高度以使图像不失真。