一，属性值
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>
