I often use background images to display an icon within a rounded square. Sometimes I need to reduce the size of both the square and the icon in it for responsive purposes.
But when I have several icons displayed as background images of different sizes, and I want to display all icons, say, 70% their original sizes, I can't just set a background-size: 70% because that would mean 70% of the square, whereas what I want is 70% of the background image own size.
Any way to achieve that in CSS ?
Transform the block instead of background image.
transform: scale(.7);