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

Question

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

Answer 1

给定height:auto当您更改宽度时。 这样写：

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

Answer 2

是的，它很拉伸。 你想怎么做而不会伸展？

您唯一可以做的就是使用服务器api重新创建映像，并且不要在CSS中使用调整大小。

但是，这样做会很困难，因为您没有保持宽高比！

Answer 3

是的，当您在水平方向上应用与垂直方向上不同的乘法因子时，它将被拉伸。 您可能需要尝试width:auto或heigth:auto 。

编辑：或者如果您对裁剪图像没有问题，可以将其放在容器元素（例如div）中，在该容器元素上设置overflow:hidden 。

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

另一个编辑：刚刚意识到可以通过使用clip属性在图像上仅使用CSS裁剪（而无需父容器）。 参见W3C页面 。
但是，可悲的是，它要求将元素绝对定位，因此，除非您确切知道要在窗口中放置的位置，否则无论如何都必须将其放置在父容器中。 那好吧。

Answer 4

我不认为可以使用img -tag来完成此操作，因为它会根据您提供的宽度/高度来拉伸图像。 但是，可以改用div -element并将图像分配为背景。 这样一来，图片将不会调整大小，无法在100x100 px元素中显示的图片部分将显示为“已裁剪”。

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

通过使用background-position属性，您还可以控制图像的哪些部分“被裁剪”。