如何用CSS缩小图像？

我有this page，我有用户上传图片图像的行业，他们正在上传更大的图像。我想通过CSS调整它的大小，并在Firebug中更改它时将它剪切。要查看我的意思，请从顶部下拉列表中选择“零售”，然后从“选择业务类型”中选择“常规”，您将看到异常形状的图像。它需要是56 像素* 52 像素。如何用CSS缩小图像？

这里是我的HTML：

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

我试图在CSS设置宽度和高度所需的测量，但它所作的只是截断的形象，而不是调整。

来源

2011-05-11 Trace

CSS 3引入了background-size property，但支持不是通用的。

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

来源

2011-05-11 18:51:12 Quentin

您可以调整使用CSS就好了，如果你修改图片标签图片：

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

不能使用扩展CSS2一个background-image属性，虽然你可以尝试CSS3属性background-size。

另一方面，你可以做的是在一个范围内嵌套一个图像。看到这个问题的答案：Stretch and scale CSS background

来源

2011-05-11 18:53:38 erjiang

这里是我做了什么：

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

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

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

这将保持图像的长宽比不变。

来源

2011-05-11 19:23:54

这只是现在的工作对我好！ – somdow 2012-05-01 16:49:22

这是一张图片，而不是背景图片。 – Dementic 2013-03-12 08:12:19

我们通过拥有两个相同的类来实现什么？第二个不会覆盖第一个？ – gsamaras 2015-09-19 00:17:15

你可以试试这个：

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

来源

2016-04-11 08:20:32

如何用CSS缩小图像？

回答

相关问题