仅使用html和CSS调整图像大小

Question

我有一个高度为173px，宽度为157px的图像。我想将其高度和宽度设置为100 px，但是当我这样做时它会被拉伸。我想使用img标签来做到这一点。调整大小

Answer 1

Give height:auto when you change it's width. Write like this:

img{
 width:100px;
height:auto;
}

Answer 2

Yes, it's stretched. How do you want to do without stretching ?

The only thing you can do is to recreate an image using a server api and do not use the resize in css.

But, it will strecht because you do not kept the ratio between width and height !

Answer 3

Yes, it gets stretched when you apply a different multiplication factor in the horizontal direction than in the vertical. You may want to try width:auto or heigth:auto .

Edit: or if you don't have a problem with cropping the image, you can put it in a container element (for instance a div), on which you set overflow:hidden .

<div style="width:100px; height:100px; overflow:hidden">
 <img src="your image" alt="" style="width:100px; height:auto" />
</div>

Another edit: Just realised it's possible to crop it using only CSS on the image (and not needing a parent container), by using the clip property. See W3C page .
However, sadly enough that requires the element to be absolutely positioned, so unless you know exactly where in the window you want to put it, you'll have to put it in a parent container anyway. Oh well.

Answer 4

I don't believe it can be accomplished with the img -tag, as it will stretch the image according to your provided width/height. It would however be possible to use a div -element instead, and assign the image as a background. That way the image will not be re-sized, the parts of the image not possible of to display within your 100x100 px element will appear "cropped".

.image-element
{
   background-image: url('yourimage.png');
   width: 100px;
   height: 100px;
}

By using the background-position attribute you could also control which parts of the image that gets "cropped".