Question

在我的网站上，我需要不同尺寸的图像。例如：

图像A，B，C：320px x 320px
图像D，E：400px x 200px
图片F：20px x 16px

我想为所有图像制作一个精灵。我想让它具有响应性，所以我使用百分比来定义它的高度和宽度。我发现在线硬编码高度的所有方法，并没有提到如何使其响应。

使用的当前方法：

我将相同大小的图像组合成一个精灵

图片A，B，C - sprite1.png
图片D，E - sprite2.png
图片F - 不使用任何精灵

我还为上面的尺寸创建了透明图像（支架）。

我之所以这样做，是因为我想出了以下的方法，让它发挥作用并仍能保持响应：

<div class="type-1">
    <img src="transparent_img_320_320.png" class="image_a" />
    <img src="transparent_img_320_320.png" class="image_b" />
    <img src="transparent_img_320_320.png" class="image_c" />
</div>

<div class="type-2">
    <img src="transparent_img_400_200.png" class="image_d" />
    <img src="transparent_img_400_200.png" class="image_e" />
</div>

<div class="type-3">
    <img src="transparent_img_20_16.png" class="image_f" />
</div>

在CSS中我将我的图像作为背景img如下所示（每个尺寸只提一个，但我重复同样的事情，并在我的代码中改变位置）：

.image_a {
    background: url(../images/sprite1.png);
    background-size: 300% 100%;
    background-position: 100% 0;
}

.image_d {
    background: url(../images/sprite2.png);
    background-size: 400% 200%;
    background-position: 300% 0;
}

问题：

需要为每个文件创建唯一的透明图像。
与许多精灵一起工作有问题。
必须将每张图片都作为背景，因为我还没有找到一个不使用硬编码高度和宽度的解决方案。
为不同大小的图像制作透明图像并不起作用。有没有办法避免透明图像？

任何其他方式这样做表示赞赏。

要求： 多个不同大小的图像，响应高度和宽度

附加问题：考虑到我的8张背景图片，大图像（例如整页背景）是精灵的一部分。

Answer 1

我认为你几乎没有办法解决你的问题。

我的第一个想法：

使用带有像素的background-position和width，height创建一个精灵文件。您可以使用transform:scale()填充自己的回复内容。

但我从来没有使用精灵用于响应式打印的大图像。在我看来，这不是一个好习惯，因为你加载了大的.png文件而不是一个按需（如你的几个背景）。

HTML，CSS，响应：如何使用包含不同大小图像的精灵？

1 个答案: