图片自适应容器的关键是使用object-fit属性，1. 首选object-fit: cover实现图片覆盖容器且不变形，2. 使用object-fit: contain确保图片完整显示并保持宽高比，3. 避免使用fill防止图片拉伸，4. 结合object-position控制图片在容器中的位置，5. 对于兼容性问题，可通过引入object-fit-images polyfill或使用@supports进行特性检测降级处理，6. 图片加载失败时，可通过onerror替换默认图或隐藏图片并显示提示内容，从而实现优雅降级，最终确保在各种环境下都能良好展示图片内容。
CSS实现图片自适应容器的关键在于
object-fit属性，它允许你控制图片如何在指定的高宽容器内缩放和定位，防止图片变形或溢出。
解决方案：
object-fit属性是核心。它有几个常用的值：
立即学习“前端免费学习笔记（深入）”；
cover
: 保持宽高比，缩放图片以完全覆盖容器。图片可能会被裁剪。contain
: 保持宽高比，缩放图片以完全适应容器。图片可能会留白。fill
: 默认值。拉伸或压缩图片以完全填充容器。图片可能变形。none
: 不缩放图片。如果图片大于容器，则会被裁剪。scale-down
: 如果图片大于容器，效果同contain
；如果图片小于容器，效果同none
。
例如，要让图片在容器内完整显示，并保持宽高比，可以使用：
img {
width: 100%; /* 容器宽度 */
height: 100%; /* 容器高度 */
object-fit: contain;
}图片自适应容器的常见问题有哪些？
图片变形是很常见的问题。默认情况下，
object-fit: fill会导致图片拉伸或压缩，除非图片的宽高比正好与容器相同。另一种情况是图片超出容器，特别是在使用
object-fit: none时。这通常发生在图片尺寸大于容器尺寸时。
要解决这些问题，首先要明确你想要的效果：是完整显示图片，还是完全覆盖容器？选择合适的
object-fit值是关键。如果需要裁剪图片以覆盖容器，
object-fit: cover是最佳选择。如果需要完整显示图片，
object-fit: contain更合适。 此外，还可以结合
object-position属性来调整图片在容器内的位置，比如
object-position: center，确保图片居中显示。
object-fit在不同浏览器中的兼容性如何？
object-fit的兼容性总体来说还是不错的，主流浏览器如Chrome、Firefox、Safari和Edge都支持。但是，在一些旧版本的浏览器，特别是IE浏览器中，可能存在兼容性问题。
为了解决兼容性问题，可以使用polyfill。一个常用的polyfill是"object-fit-images"。使用方法很简单，首先引入polyfill脚本：
然后在页面加载完成后，调用
objectFitImages()函数：
window.onload = function() {
objectFitImages();
}这个polyfill会自动检测不支持
object-fit的浏览器，并使用JavaScript模拟实现该属性的效果。 另一种方法是使用CSS feature queries，针对不支持
object-fit的浏览器应用不同的样式。例如：
img {
width: 100%;
height: 100%;
}
@supports not (object-fit: cover) {
img {
/* 针对不支持 object-fit 的浏览器，使用替代方案 */
object-fit: initial; /* 或者其他替代样式 */
font-family: 'object-fit: initial'; /* 触发 hack */
}
}图片加载失败时，如何优雅地处理？
图片加载失败是一个很现实的问题。如果图片因为网络问题或其他原因无法加载，页面上可能会显示一个难看的broken image图标。
一个简单的处理方法是使用
onerror事件监听器。当图片加载失败时，
onerror事件会被触发，我们可以在事件处理函数中替换为一张默认图片，或者显示一段友好的提示信息。
@@##@@
这段代码的意思是，如果
image.jpg加载失败，则将
src属性替换为
default.jpg。
this.onerror=null是为了防止
onerror事件循环触发。
另一种方法是使用CSS来隐藏加载失败的图片，并显示一个替代元素。
@@##@@图片加载失败
.image-container {
position: relative;
}
.placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}这段代码中，如果图片加载失败，
onerror事件会将图片的
display属性设置为
none，从而隐藏图片。同时，
.placeholder元素会显示出来，提示用户图片加载失败。
