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

要让大小不同的图片等比缩放不变形显示在固定大小的 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 的值，并使用不同大小的图片进行测试，你可以找到最适合你需求的显示方式。 这个例子使用了占位图，你可以替换成你自己的图片地址。

posted @ 2024-11-24 18:05  王铁柱6  阅读(157)  评论(0)    收藏  举报