要让大小不同的图片等比缩放不变形显示在固定大小的 div 里，关键在于设置 object-fit CSS 属性。以下是一个例子，并解释了不同的 object-fit 值的效果：
<!DOCTYPE html>
<html>
<head>
<title>Image Scaling</title>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid black;
margin-bottom: 10px; /* Add some spacing between divs */
}
.container img {
width: 100%;
height: 100%;
object-fit: contain; /* Change this value to see different effects */
}
.fill img {
object-fit: fill;
}
.cover img {
object-fit: cover;
}
.none img {
object-fit: none;
}
.scale-down img {
object-fit: scale-down;
}
</style>
</head>
<body>
<h1>Contain (Default)</h1>
<div class="container">
<img src="https://via.placeholder.com/150x250">
</div>
<h1>Fill</h1>
<div class="container fill">
<img src="https://via.placeholder.com/150x250">
</div>
<h1>Cover</h1>
<div class="container cover">
<img src="https://via.placeholder.com/150x250">
</div>
<h1>None</h1>
<div class="container none">
<img src="https://via.placeholder.com/150x250">
</div>
<h1>Scale-down</h1>
<div class="container scale-down">
<img src="https://via.placeholder.com/150x250">
</div>
</body>
</html>
解释：
-
object-fit: contain;: 这是默认行为。图片会完全包含在 div 内，保持宽高比不变。如果图片的宽高比与 div 的宽高比不同，图片周围会出现空白。 -
object-fit: fill;: 图片会拉伸以填满整个 div，可能会导致图片变形。 -
object-fit: cover;: 图片会缩放以覆盖整个 div，保持宽高比不变。图片的某些部分可能会被裁剪掉。 -
object-fit: none;: 图片不会缩放。图片的原始大小会被保留，可能会超出 div 的边界。 -
object-fit: scale-down;: 图片会缩小以适应 div，保持宽高比不变。如果图片的原始大小小于 div，则不会缩放。 类似于contain和none中较小的那个效果。
如何选择合适的 object-fit 值：
- 如果你希望图片完整显示且不变形，即使周围有空白，选择
contain。 - 如果你希望图片填满整个 div，即使变形，选择
fill。 - 如果你希望图片覆盖整个 div，即使裁剪，选择
cover。 这通常用于背景图片。 - 如果你不希望图片缩放，选择
none。 - 如果你希望图片缩小以适应 div，但不大于原始大小，选择
scale-down。
通过修改 object-fit 的值，并使用不同大小的图片进行测试，你可以找到最适合你需求的显示方式。 这个例子使用了占位图，你可以替换成你自己的图片地址。