css—— object-fit 属性
一，属性值
object-fit: fill | contain | cover | none | scale-down;
原本的图片：
属性值效果：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.box {
width: 200px;
height: 200px;
border: 2px solid #333;
margin-bottom: 30px;
}
img {
width: 100%;
height: 100%;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
.title {
font-weight: bold;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="box">
<img src="./imgs/4.jpg" class="fill" alt="fill example">
</div>
<div class="title">object-fit: fill</div>
<ul>
<li>不保持原始宽高比</li>
<li>完全拉伸/压缩以填满容器</li>
</ul>
</div>
<div>
<div class="box">
<img src="./imgs/4.jpg" class="contain" alt="contain example">
</div>
<div class="title">object-fit: contain</div>
<ul>
<li>保持原始宽高比</li>
<li>完全填充容器，可能会有空白</li>
<li>如果容器与元素宽高比不同，会出现空白</li>
</ul>
</div>
<div>
<div class="box">
<img src="./imgs/4.jpg" class="cover" alt="cover example">
</div>
<div class="title">object-fit: cover</div>
<ul>
<li>保持原始宽高比</li>
<li>完全填充容器，多余部分会被裁剪</li>
<li>通常推荐用于背景图或需要铺满容器的场景</li>
</ul>
</div>
<div>
<div class="box">
<img src="./imgs/4.jpg" class="none" alt="none example">
</div>
<div class="title">object-fit: none</div>
<ul>
<li>保持原始宽高比</li>
<li>不进行任何缩放</li>
<li>超出部分会溢出</li>
</ul>
</div>
<div>
<div class="box">
<img src="./imgs/4.jpg" class="scale-down" alt="scale-down example">
</div>
<div class="title">object-fit: scale-down</div>
<ul>
<li>保持原始宽高比</li>
<li>如果图片比容器小，则表现与 contain 一样</li>
<li>如果图片比容器大，则表现与 none 一样</li>
</ul>
</div>
</div>
</body>
</html>
二，实际应用示例
1，头像裁剪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* 确保头像始终填满圆形区域 */
object-position: center; /* 居中对齐 */
}
</style>
</head>
<body>
<div>
<h3>原图300x200，显示区域100x100，object-fit: cover</h3>
<img src="https://picsum.photos/300/200" class="avatar" alt="fill example">
</div>
</body>
</html>
2，响应式背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>
.hero-section {
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-image: url('https://picsum.photos/200/300');
background-size: cover;
background-position: center;
}
.responsive-background {
max-width: 100%;
height: 500px;
object-fit: cover;
object-position: center;
}
</style>
</head>
<body>
<div class="hero-section">
<img class="responsive-background" src="https://picsum.photos/200/300" alt="背景图">
</div>
</body>
</html>
3，照片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>
.product-carousel {
display: flex;
overflow-x: auto;
}
.product-image {
width: 300px;
height: 400px;
margin-right: 10px;
object-fit: contain; /* 完整显示产品 */
background-color: #f0f0f0; /* 背景色 */
padding: 20px;
}
</style>
</head>
<body>
<div class="product-carousel">
<img class="product-image" src="https://picsum.photos/400/600">
<img class="product-image" src="https://picsum.photos/300/300">
<img class="product-image" src="https://picsum.photos/200/300">
<img class="product-image" src="https://picsum.photos/300/200">
</div>
</body>
</html>