如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子

在前端开发中，等比缩放图片以适配固定大小的 div 容器是一个常见的需求。这通常可以通过 CSS 来实现，确保图片在缩放时不会变形。以下是一个简单的例子，说明如何使用 CSS 来完成这个任务：

1. HTML 结构：

首先，创建一个包含图片的 div 容器。

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

2. CSS 样式：

然后，使用 CSS 来设置容器的固定大小，并确保图片等比缩放以适应这个容器。

.image-container {
    width: 300px; /* 设置容器的宽度 */
    height: 200px; /* 设置容器的高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    position: relative; /* 设置相对定位，以便图片可以相对于此容器定位 */
}

.image-container img {
    width: 100%; /* 设置图片宽度为容器宽度，高度将自动等比缩放 */
    height: auto; /* 确保高度自动，以保持图片的原始宽高比 */
    position: absolute; /* 绝对定位图片 */
    top: 50%; /* 将图片顶部设置到容器高度的50%处 */
    left: 50%; /* 将图片左侧设置到容器宽度的50%处 */
    transform: translate(-50%, -50%); /* 使用 transform 移动图片的位置，使其居中 */
    object-fit: cover; /* 确保图片覆盖整个容器，同时保持其宽高比 */
}

在这个例子中，.image-container 是固定大小的 div，而 img 标签内的图片将会等比缩放以适应这个容器。overflow: hidden; 确保任何超出容器大小的图片部分都会被隐藏。object-fit: cover; 则确保图片始终覆盖整个容器，同时保持其原始的宽高比。

请注意，你需要将 "your-image-source.jpg" 替换为你想要显示的实际图片路径或 URL。同时，你可以根据需要调整 .image-container 的 width 和 height 值来设置容器的大小。