Question

我一直试图通过添加width和height属性来改变css的图像大小。但是，这只会改变图片的缩放。

例如，我有一个90像素×90像素的图像。但是，当我改变宽度和高度时，它就像是图片的放大版本，而不是更小的图片。

我的css是：

.image-90 {
    horiz-align: center;
    width: 60px;
    height: 60px;
    background-size: 90px 90px;
    margin: 10px;
    border: 1px rgb(218, 218, 218) solid;
    background: #C4C4C4 no-repeat 0 0;
    background-image: url('/Content/images/person_noimage.png? width=90&height=90&mode=crop');
}

这是我的html（我的图片网址存储在Person.AvitarImage中）：

<div class="image-90" style="background-image:url-Person.AvitarImage"></div>

Answer 1

background-size必须在 background和background-image之后声明。我不确定它是否适用于所有浏览器，但至少在Chrome和Firefox中我注意到了这一点。见http://jsfiddle.net/WS2qe/1/

如果只设置一个值，则假设为宽度，高度将自动调整以保持背景比例。

如何在css中更改图像的大小

1 个答案: