Html 如何使用CSS使图像变小？

我和我的用户上传了一个行业图标图片，他们正在上传一个更大的图片。我想调整它的大小，通过它的切割时，改变它在。要了解我的意思，请从顶部下拉菜单“选择行业类别”中选择“零售”，然后从“选择业务类型”中选择“一般”，您将看到形状奇特的图像。它需要56像素*52像素

这是我的HTML：

<span class="icon select-business-icon" style="background-image: url(http://posnation.com/shop_possystems/image/data/icons/retail.png);">&nbsp;</span> 

我在CSS中尝试将宽度和高度设置为所需的测量值，但它所做的只是截断图像而不是调整大小。

CSS 3引入了，但支持并不普遍

---

让浏览器调整图像的大小效率很低，但仍然需要下载大图像。您应该在服务器端调整它的大小（缓存结果）并使用它。它将使用更少的带宽并在更多的浏览器中工作。

如果要修改图像标记，可以使用CSS调整图像大小：

<img src="example.png" style="width:2em; height:3em;" />

无法使用CSS2缩放背景图像属性，但可以尝试使用CSS3属性

背景大小

另一方面，您可以做的是在跨度内嵌套一个图像。请参阅此问题的答案：

以下是我所做的：

.resize {
    width: 400px;
    height: auto;
}

.resize {
    width: 300px;
    height: auto;
}

<img class="resize" src="example.jpg"/>

。调整大小{
宽度：400px；
高度：自动；
}
.调整大小{
宽度：300px；
高度：自动；
}

这将保持图像纵横比不变。

您可以尝试以下方法：

-ms-transform: scale(width,height); /* IE 9 */
-webkit-transform: scale(width,height); /* Safari */
transform: scale(width, height);

示例：图像“增长”1.3倍

-ms-transform: scale(1.3,1.3); /* IE 9 */
-webkit-transform: scale(1.3,1.3); /* Safari */
transform: scale(1.3,1.3);

---

这是一个图像，不是背景图像。我们使用两个相同的类可以实现什么？第二个不是覆盖了第一个吗？？