Question

我有this page我有用户为行业上传图标图片，他们正在上传更大的图片。我希望通过CSS调整大小，并在Firebug更改它时将其删除。要查看我的意思，请从顶部下拉菜单“选择行业类别”中选择“零售”，然后从“选择业务类型”中选择“常规”，您将看到形状奇特的图像。它需要是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中将宽度和高度设置为所需的测量值，但它所做的只是截断图像而不是调整大小。

Answer 1

这就是我所做的：

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

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

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

这将使图像宽高比保持不变。

Answer 2

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

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

虽然您可以尝试使用CSS3属性background-size，但无法使用CSS2缩放背景图像属性。

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

Answer 3

CSS 3引入了background-size property，但支持并不普遍。

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

如何使用CSS缩小图像？

3 个答案: