使用JavaScript达成 background-size: cover 的效果
内容提要
文章介绍如何用JavaScript模拟CSS的background-size: cover效果，使图片或视频在容器内保持宽高比并填满容器，兼容至IE 7。作者先分析cover原理：图片宽度先撑满容器，高度不足时按原始宽高比放大。随后给出实现代码，通过定位、计算宽高和边距实现居中填充，并监听窗口resize与图片load事件重新计算。用法是传入容器和图片元素，视频元素同样适用。
延伸解读
为什么需要 JS 模拟 cover
文章源于一个兼容 IE 7 的视频适配需求。CSS 的 background-size: cover 是 CSS3 属性，IE 8 及以下不支持，且只对背景图片有效，无法直接作用于 img 或 video 元素。作者因此转向用 JavaScript 计算尺寸和定位，来复现“保持宽高比并填满容器”的视觉效果，这也解释了为何要绕开纯 CSS 方案。
cover 的计算逻辑
作者把 cover 拆成两步：先让图片宽度等于容器宽度；若此时高度仍小于容器高度，则按原始宽高比放大宽度，直到高度撑满容器。代码中通过 clientHeight/clientWidth 取得比例，并在高度不足时用容器高度除以比例反推宽度。理解这一顺序，有助于判断图片在窄高或宽扁容器中会如何被裁剪。
居中与重算的细节
实现上把容器设为 relative、图片设为 absolute，并用 top/left 50% 配合负 margin 实现居中。窗口 resize 和图片 load 时都会重新计算，避免初始尺寸不准。需要注意的是，代码依赖图片加载后的 clientWidth/clientHeight，若图片尚未加载完成，比例可能为 0，因此 onload 回调是保证计算正确的关键环节。
适用范围与限制
文章称该方案已测试兼容到 IE 7，且传入视频元素也能使用，适合需要覆盖老浏览器的场景。但它通过内联样式和全局 resize 回调实现，每次窗口变化都重新计算，且只处理单个容器与媒体元素。对于现代项目，直接使用 object-fit 或 background-size 会更简单，此方案更适合作为兼容旧环境的备选。
Q&A
如何用JavaScript实现类似background-size: cover的图片填充效果？
可以通过编写一个JavaScript函数来模拟cover效果。核心是计算图片的宽高比，然后根据容器尺寸动态设置图片的宽度、高度和边距，使其保持宽高比并填满容器。具体实现包括：设置容器为相对定位，图片为绝对定位并居中，然后根据图片高度是否小于容器高度来调整宽度或高度。同时需要监听窗口resize和图片load事件重新计算。
background-size: cover在IE7下不兼容，有什么替代方案？
由于background-size: cover是CSS3属性，IE8及以下不支持，且只对图片有效。替代方案是用JavaScript模拟cover效果，通过计算和设置图片的尺寸和位置来实现，这样可以兼容到IE7，并且同样适用于视频元素。
用JS模拟cover效果时，如何让图片在容器中居中并保持宽高比？
首先设置容器position: relative，图片position: absolute，top和left为50%。然后根据图片的宽高比和容器尺寸计算图片的宽度和高度，并用负的marginLeft和marginTop将图片向左上偏移自身宽高的一半，从而实现居中。同时要确保图片宽度或高度至少有一项撑满容器。
这个JS cover方案能用于视频吗？怎么用？
可以。该方案不仅适用于图片，也适用于视频元素。使用时只需将视频元素作为img参数传入即可，例如：kkkover({ wrapCell: 容器元素, img: 视频元素 })。代码会同样计算和设置视频的尺寸和位置，实现类似cover的效果。
JS模拟cover效果需要监听哪些事件来保证响应式？
需要监听两个事件：窗口的resize事件和图片（或视频）的load事件。resize事件用于在窗口尺寸变化时重新计算图片样式；load事件用于在图片加载完成后获取其原始尺寸并计算宽高比，然后应用样式。
提供的JS代码具体如何使用？请给出示例。
使用方式如下：在HTML中准备一个容器和其中的图片（或视频），例如<div id="test"><img src="path/to/img" id="test_img"></div>。然后调用kkkover函数，传入容器和图片元素：kkkover({ wrapCell: document.getElementById('test'), img: document.getElementById('test_img') })。代码会自动处理样式和事件。
