I've been struggling to adjust the dimensions of my image using CSS by specifying a width and height attribute. However, instead of resizing the picture, it seems to simply zoom in on the existing image.
For instance, I have an image that is 90px by 90px. But whenever I modify the width and height values, it appears as if the image is just being magnified rather than becoming smaller.
My current CSS code looks like this:
.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');
}
Below is the HTML segment where I'm trying to display the image (the URL is stored in Person.AvatarImage):
<div class="image-90" style="background-image:url-Person.AvatarImage"></div>