僅使用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屬性，您還可以控制圖像的哪些部分“被裁剪”。