如何使用CSS缩小图像?

时间:2011-05-11 18:48:56

标签: html css

我有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中将宽度和高度设置为所需的测量值,但它所做的只是截断图像而不是调整大小。

3 个答案:

答案 0 :(得分:15)

这就是我所做的:

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

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

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

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

答案 1 :(得分:6)

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

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

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

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

答案 2 :(得分:5)

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

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