Html 如何使用 CSS 使图像变小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5969114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an image smaller with CSS?
提问by Matt Elhotiby
I have this pageand I have users uploading an icon image for the industries and they are uploading a bigger image. I want to resize it via CSSand it's cutting it when changing it in Firebug. To see what I mean, select "retail" from the top dropdown "Select Industry Category" and then select "General" from "Select Business Type" and you will see the oddly shaped image. It needs to be 56 pixels * 52 pixels.
我有这个页面，我有用户上传行业的图标图像，他们正在上传更大的图像。我想通过CSS调整它的大小，并且在Firebug 中更改它时它正在切割它。要了解我的意思，请从顶部下拉菜单“选择行业类别”中选择“零售”，然后从“选择业务类型”中选择“一般”，您将看到形状奇特的图像。它需要是 56 像素 * 52 像素。
Here is my HTML:
这是我的 HTML：
<span class="icon select-business-icon" style="background-image: url(http://posnation.com/shop_possystems/image/data/icons/retail.png);"> </span>
I tried in the CSS to set the width and height to the desired measurements, but all it did was truncate the image and not resize.
我尝试在 CSS 中将宽度和高度设置为所需的尺寸，但它所做的只是截断图像而不是调整大小。
回答by David W.
Here's what I've done:
这是我所做的：
.resize {
width: 400px;
height: auto;
}
.resize {
width: 300px;
height: auto;
}
<img class="resize" src="example.jpg"/>
This will keep the image aspect ratio the same.
这将使图像纵横比保持不变。
回答by erjiang
You can resize images using CSS just fine if you're modifying an image tag:
如果您正在修改图像标记，则可以使用 CSS 调整图像大小：
<img src="example.png" style="width:2em; height:3em;" />
You cannot scale a background-image property using CSS2, although you can try the CSS3 property background-size.
您不能使用 CSS2 缩放 background-image 属性，但您可以尝试使用 CSS3 属性background-size。
What you can do, on the other hand, is to nest an image inside a span. See the answer to this question: Stretch and scale CSS background
另一方面，您可以做的是在跨度内嵌套图像。请参阅此问题的答案：Stretch and scale CSS background
回答by Quentin
CSS 3 introduces the background-size property, but support is not universal.
CSS 3 引入了background-size 属性，但支持并不普遍。
Having the browser resize the image is inefficient though, the large image still has to be downloaded. You should resize it server side (caching the result) and use that instead. It will use less bandwidth and work in more browsers.
虽然让浏览器调整图像大小效率低下，但仍然需要下载大图像。您应该在服务器端调整它的大小（缓存结果）并使用它。它将使用更少的带宽并在更多浏览器中工作。
回答by Deividas Maciejauskas
You can try this:
你可以试试这个：
-ms-transform: scale(width,height); /* IE 9 */
-webkit-transform: scale(width,height); /* Safari */
transform: scale(width, height);
Example: image "grows" 1.3 times
示例：图像“增长”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);
