将背景图像减少其自身而不是父元素的百分比答案

【问题标题】：Reducing a background-image by a percentage of itself not of the parent element将背景图像减少其自身而不是父元素的百分比
【发布时间】：2015-05-31 13:27:57
【问题描述】：

我经常使用background images 在圆角正方形内显示图标。有时为了响应的目的，我需要减小正方形和图标的大小。

但是当我有几个图标显示为不同大小的background images 时，我想显示所有图标，比如它们原始大小的 70%，我不能只设置 background-size: 70%，因为这意味着 70%正方形的大小，而我想要的是 background image 自身大小的 70%。

有什么方法可以在 CSS 中实现吗？

【问题讨论】：

你能给我们一个小提琴或html和css吗？我想从那里帮助你。

标签： html css background-size

【解决方案1】：

转换块而不是背景图像。

transform: scale(.7);

【讨论】：

哇，它有点工作。背景图像确实会按我的意愿缩小。但是周围正方形的边框不再是 1px 厚，所以有些边缘是不可见的。有什么方法可以在不影响边框厚度的情况下进行转换？
增加边框厚度会起作用吗？还是太厚了？

【解决方案2】：

如果我正确理解您的要求（背景图像本身的 70%），那么我认为 CSS 不可能做到这一点。你可以用 JS 来实现它。获取图像的尺寸，计算其中的 70%（宽度 * 0.7 和高度），然后将其设置为 background-size:40px 40px; 的尺寸

【讨论】：