如何使用CSS使图像变小？
如何使用CSS使图像变小？
提问于 2011-05-12 02:48:56
我有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);"> </span> 我尝试在CSS中将宽度和高度设置为所需的测量值，但它所做的只是截断图像，而不是调整大小。
回答 4
Stack Overflow用户
发布于 2011-05-12 03:23:55
下面是我所做的：
.resize {
width: 400px;
height: auto;
}
.resize {
width: 300px;
height: auto;
}
<img class="resize" src="example.jpg"/>这将使图像的纵横比保持不变。
Stack Overflow用户
发布于 2011-05-12 02:53:39
如果您正在修改图像标签，则可以使用CSS调整图像的大小：
<img src="example.png" style="width:2em; height:3em;" />尽管可以尝试使用CSS3属性background-size，但不能使用CSS2缩放背景图像属性。
另一方面，您可以做的是在范围内嵌套一个图像。查看这个问题的答案：Stretch and scale CSS background
Stack Overflow用户
发布于 2011-05-12 02:51:12
CSS3引入了background-size property，但支持并不是通用的。
然而，让浏览器调整图像的大小效率很低，仍然需要下载大图像。您应该在服务器端调整它的大小(缓存结果)并使用它。它将使用更少的带宽，并在更多的浏览器中工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5969114
复制相关文章
相似问题
腾讯云开发者
