Уменьшение фонового изображения на процент от себя не от родительского элемента

Question

Я часто использую background images для отображения значка в закругленном квадрате. Иногда мне нужно уменьшить размер как квадрата, так и значка в нем в ответных целях.

Но когда у меня есть несколько значков, отображаемых как background images разных размеров, и я хочу показать все значки, скажем, на 70% от их первоначальных размеров, я не могу просто установить background-size: 70%, потому что это будет означать 70% площади , тогда как я хочу 70% от background image собственного размера.

Любой способ добиться этого в CSS?

Answer 1

Преобразование блока вместо фонового изображения.

transform: scale(.7); 

Answer 2

Если я правильно понимаю, о чем вы просите (70% самого фонового изображения), то я не думаю, что это возможно с помощью CSS. Вы могли бы добиться этого с помощью JS. Получите размеры изображения, вычислите, что составляет 70% от них (ширина * 0,7 и высота), и используйте это, чтобы установить это как размеры background-size:40px 40px;