CSS中保持宽高比为100%

在使用CSS时，我们经常需要设置图片的宽度或高度至 100%。然而，这样做可能会导致图像扭曲。发生这种情况的原因是未保持宽高比（图像宽度和高度之间的比例关系）。

要在使用 100% 宽度或高度时保持宽高比，我们需要将图像的大小限制在具体方式。如果我们在图像上仅定义一个维度（宽度或高度），则自动保留宽高比。

但是，如果我们将宽度和高度都设置为 100%，则图像对于我们来说可能会变得太大预期的空间。在这种情况下，我们可以将图像放置在符合我们需要的最大宽度或高度的 DIV 中。然后，我们可以使用 Overflow:hidden 属性来裁剪图像中超出指定尺寸的任何部分。

或者，我们可以使用 max-width 和 max-height 属性来控制图像的最大尺寸图像。通过设置这些值而不定义任何最小尺寸，我们确保图像不会扭曲并且不会超过指定的最大尺寸。