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

Question

In my website, I require images of different sizes. For example:

• Images A, B, C : 320px x 320px
• Image D, E : 400px x 200px
• Image F : 20px x 16px

I want to make a single sprite for all the images. I want to make it responsive so I use percentages to define its height and width. All the methods I found online hard code heights and don't mention how to make it responsive.

The current method used:

I combined equal sized images into one sprite

• Images A, B, C - sprite1.png
• Images D, E - sprite2.png
• Image F - not using any sprite

I also created transparent images (holders) for the sizes above.

The reason I'm doing it this way because I figured out the below way of making it work and still be responsive:

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

And in CSS I put my images as background img as below (mentioning only one per one size but I'm repeating the same thing and changing position in my code):

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

Problems:

• Need to create a unique transparent image for each file.
• Problematic to work with many sprites.
• Have to put every image as background, as I haven't found a solution that doesn't use hardcoded height and width for .
• making transparent images stretch for images of different sizes isn't working. Is there a way to avoid the transparent images?

Any other way to do this is appreciated.

Requirements: multiple images of varying sizes, responsive height and width

additional-question: Do large images(such as background of the entire page) be a part of the sprite, considering I've 8 background images.

Answer 1

I think you have few options to manage with your problem.

My first idea:

Create one sprite file, with background-position and width , height with pixels. You can use transform:scale() to fill your responsive content.

But I never use sprite for big images for responsive print. In my opinion it's not good habit because you load big .png file instead of one on demand (like your few backgrounds).