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

原文由 Matt Elhotiby 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我所做的：

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

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

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

这将使图像纵横比保持不变。

原文由 David W. 发布，翻译遵循 CC BY-SA 3.0 许可协议