如何使用CSS缩小图像？

Question

我有这个页面,我有用户上传行业的图标图像,他们正在上传更大的图像.我想通过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属性,但无法使用CSS2缩放背景图像属性background-size.

另一方面,您可以做的是将图像嵌套在跨度内.请参阅此问题的答案:拉伸和缩放CSS背景

Answer 3

CSS 3引入了background-size属性,但支持不是通用的.

让浏览器调整图像大小是有效的,但是仍然必须下载大图像.您应该调整服务器端的大小(缓存结果)并使用它.它将使用更少的带宽,并在更多的浏览器中工作.

Answer 4

你可以试试这个：

-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);