CSS中保持寬高比為100%

在使用CSS時，我們經常需要設定圖片的寬度或高度至100% 。然而，這樣做可能會導致圖像扭曲。發生這種情況的原因是未保持寬高比（影像寬度和高度之間的比例關係）。

要在使用 100% 寬度或高度時保持寬高比，我們需要將圖像的大小限制在具體方式。如果我們在圖像上僅定義一個維度（寬度或高度），則自動保留寬高比。

但是，如果我們將寬度和高度都設為 100%，則影像對我們來說可能會變得太大預期的空間。在這種情況下，我們可以將影像放置在符合我們需求的最大寬度或高度的 DIV 中。然後，我們可以使用 Overflow:hidden 屬性來裁剪影像中超出指定尺寸的任何部分。

或者，我們可以使用 max-width 和 max-height 屬性來控制影像的最大尺寸影像。透過設定這些值而不定義任何最小尺寸，我們確保圖像不會扭曲並且不會超過指定的最大尺寸。