如何调整不同宽高比的图片大小以适合div的大小而不拉伸它？

可以使用 CSS 来实现这个效果。具体做法是使用对象 fit 属性。对象 fit 属性规定如何调整图像以适合元素，它可以具有以下几种值：

• fill：缩放图像以填充父元素，图像可能会被拉伸或扭曲。
• contain：缩放图像以适应元素的宽度和高度，保持纵横比，并在元素内居中。
• cover：缩放图像以填充尽可能多的元素空间，同时保持纵横比，并在元素内居中。
• none：不对图像进行缩放。
• scale-down：按比例缩小图像，直到它适合元素大小。缩小比例是通过比较元素大小和图像自然尺寸的较小值得出的。

在这种情况下，我们可以使用'contain”值，因为它可以在不拉伸图像的同时调整其大小以适合元素。

HTML 代码：

<div class="image-container">
   <img class="image" src="your-image-source.jpg" alt="your-image-alt">
</div>

CSS 代码：

.image-container {
   width: 500px;
   height: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.image {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

在这个例子中，我们将图像容器设置为宽度和高度为 500px，并将其的子元素对齐和居中。同时，我们将图像的 object-fit 属性设置为'contain”，以确保图像适应容器大小而没有任何变形。