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

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;
}

问题：

需要为每个文件创建一个唯一的透明图像。
使用很多 sprite 有问题。
必须将每张图片都作为背景，因为我还没有找到不使用硬编码高度和宽度的解决方案。
为不同尺寸的图像拉伸透明图像不起作用。有没有办法避免透明图像？

任何其他方式来做到这一点表示赞赏。

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

附加问题：考虑到我有 8 张背景图片，大图片（例如整个页面的背景）是否会成为 sprite 的一部分。

Answer 1

我认为您没有多少选择可以解决您的问题。

我的第一个想法：

创建一个 sprite 文件，background-position 和 width，height 像素。您可以使用 transform:scale() 来填充您的响应式内容。

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

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

HTML, CSS, Responsive: How to use a sprite containing images of different sizes?

html

css

image

css-sprites

responsive