在 HTML 和 CSS 中，如何控制图像显示方式？
天天向上
发布： 2025-01-03 22:56:59
原创
174
人浏览过
在 HTML 和 CSS 中，图像填充（image filling）指的是如何控制图像在元素中的显示方式，特别是如何使图像适应容器的尺寸，或确保图像在不同屏幕或视口中保持良好的比例和显示效果。图像填充通常通过 CSS 来实现，可以使用
background-image、object-fit等属性来控制图像的显示方式。
1. 使用 background-image 和填充效果
background-image 属性允许你将图像作为背景应用于元素。通过配合其他背景相关的属性，可以控制图像如何填充元素的区域。
语法：
element {
background-image: url('image.jpg'); /* 设置背景图像 */
background-size: cover; /* 控制图像填充方式 */
background-position: center; /* 设置图像的位置 */
background-repeat: no-repeat; /* 防止图像重复 */
}常见的 background-size 值：
cover: 保证背景图像覆盖整个元素，图像可能会被裁剪以适应元素的大小，但不会拉伸图像。contain: 保证图像完整显示在元素内，图像会根据容器的大小缩放，可能会在元素内留下空白区域。
示例 1：使用 background-size: cover 填充背景图像
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像填充示例</title>
<style>
.image-container {
width: 100%;
height: 400px;
background-image: url('https://via.placeholder.com/800x600'); /* 设置背景图 */
background-size: cover; /* 保证图像覆盖整个容器 */
background-position: center; /* 背景图居中 */
background-repeat: no-repeat; /* 防止图像重复 */
}
</style>
</head>
<body>
<div class="image-container"></div>
</body>
</html>解释：
- 图像
https://via.placeholder.com/800x600被作为背景图应用到div元素上。 background-size: cover确保图像覆盖整个容器区域，即使图像的宽高比例与容器不一致，图像也会按比例缩放，可能被裁剪。background-position: center保证图像始终居中显示。
输出：
- 在页面上显示一个 400px 高、100% 宽度的
div，其背景图会覆盖整个区域，图像的部分区域可能被裁剪。
示例 2：使用 background-size: contain 填充背景图像
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像填充示例</title>
<style>
.image-container {
width: 100%;
height: 400px;
background-image: url('https://via.placeholder.com/800x600'); /* 设置背景图 */
background-size: contain; /* 保证图像完全显示 */
background-position: center; /* 背景图居中 */
background-repeat: no-repeat; /* 防止图像重复 */
}
</style>
</head>
<body>
<div class="image-container"></div>
</body>
</html>解释：
background-size: contain确保图像在容器内完全显示，图像会根据容器的大小缩放，但可能会留下空白区域。- 图像始终保持完整，并且不会被裁剪。
输出：
- 在页面上显示一个 400px 高、100% 宽度的
div，其中背景图像的完整部分都会显示出来，可能会有空白区域。
2. 使用 object-fit 在 <img> 标签中填充图像
在 <img> 标签中，object-fit 属性用于控制图像如何填充其父元素（如 div）的大小。这个属性常用于控制图像的自适应显示，尤其是在响应式设计中。
常见的 object-fit 值：
fill: 图像会拉伸或压缩以适应父元素的尺寸，可能会导致图像失真。contain: 图像会缩放以适应父元素，保持完整显示，可能会有空白区域。cover: 图像会覆盖整个父元素，可能会被裁剪。none: 图像不会缩放，原始尺寸显示，可能超出父元素。scale-down: 图像根据原始尺寸和contain、cover的要求进行缩放。
示例 1：使用 object-fit: cover 填充 <img> 图像
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像填充示例</title>
<style>
.image-container {
width: 100%;
height: 400px;
overflow: hidden; /* 防止图像超出容器 */
}
img {
width: 100%;
height: 100%;
object-fit: cover; /* 图像填充整个容器，可能裁剪 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/800x600" alt="示例图像">
</div>
</body>
</html>解释：
object-fit: cover使图像在其父容器中按比例缩放，以确保图像填满整个容器，但可能会裁剪掉图像的一部分。width: 100%和height: 100%确保图像完全填充容器的尺寸。overflow: hidden防止图像超出容器范围。
输出：
- 图像填充整个容器，可能会被裁剪，确保容器完全被图像覆盖。
示例 2：使用 object-fit: contain 填充 <img> 图像
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像填充示例</title>
<style>
.image-container {
width: 100%;
height: 400px;
}
img {
width: 100%;
height: 100%;
object-fit: contain; /* 图像保持比例，完整显示 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/800x600" alt="示例图像">
</div>
</body>
</html>解释：
object-fit: contain保证图像完整显示，可能会留下空白区域。- 图像根据容器大小自动缩放，保持图像的比例。
输出：
- 图像完整显示在容器内，可能会留下空白区域，确保图像不会被裁剪。
总结
background-image用于为元素设置背景图像。可以配合background-size: cover和background-size: contain来控制图像的填充方式，前者保证图像覆盖整个容器，后者保证图像完全显示。object-fit用于<img>标签，允许你控制图像在容器中的适应方式。cover会裁剪图像以适应容器，contain会保证图像完整显示，可能留有空白区域。
这两种方法分别用于背景图像和普通图像，在设计响应式网站时非常实用，可以确保图像在不同屏幕和容器尺寸下始终显示得当。