CODEWITHSUNDEEP
csswebpackcss-spritesresponsivenessgrunt-spritesmith
t-bone
t-bone

Reputation: 184

How do I make the sprite images generated by webpack-spritesmith responsive using CSS?

When using webpack-spritesmith to generate a sprite image, the css generated typically looks like this:

.icon-AutoFollow {
  background-image: url(images/sprite.jpg);
  background-position: -2222px 0px;
  width: 800px;
  height: 999px;
}
.icon-Battery {
  background-image: url(images/sprite.jpg);
  background-position: -3284px -1372px;
  width: 278px;
  height: 278px;
}

which is nice if I want to width of the images to be 800px for AutoFollow and 278px for battery. However, how would I go about making those images full-width responsive (the equivalent of a <img> tag with width: 100%; and height: auto;)?

Upvotes: 2

Views: 501

Answers (0)

Related Questions