使用 css 的 object-fit 属性可以设置一个元素在另一个元素里面显示的时候，它的宽度与高度应该是什么样的 .. 这个属性经常会用在图像或者视频元素上 ..

你可以 can i use 网站上去查看支持这个属性的浏览器 .. 除了 ie ，大部分浏览器都可以使用这个属性 ..

复制一下项目下面的 practices 下面的 vw-vh.html .. 名字可能是 object-fit.html

然后在浏览器上打开这个文档 ..

回到编辑器 .. 在这个 div .. 里面包装一个图像元素 .. 在项目的 images 目录的下面，有一个名字是 demo.jpg 的图像文件 .. images 目录相对于这个文件的位置是上一级目录，所以在它前面要加上 ../ ，表示上一级目录 ..

先设置一下 div 的样式 .. 一个 width ，宽度设置成 100vw .. 个 height，高度设置成 65vh ..

再预览一下 .. 现在这里显示的是默认的样式 ..

这个图像元素的高度大于包装它的容器的高度，所以默认它会溢出一部分 .. 如果你想隐藏溢出的这部分 .. 可以在包装它的这个元素上面，添加一个 overflow ，把它的值设置成 hidden ..

如果你想让这个图像响应窗口的宽度 .. 可以在这个图像元素上，把它的 width 属性的值设置成 100% ..

注意，把窗口缩小到一定程度的时候 .. 图像的高度会小于包装它的容器的高度 .. 这里就会露出包装元素的背景颜色 ..

我们可以给这个图像元素一个高度 .. 比如也把它设置成 65vh ..

现在图像元素的宽度还有高度都会响应窗口的宽度还有高度 ... 不过这个图像不会保持它原有的比例了 ..

再回过来 ... 在这个图像元素的上面，我们可以再用一下 object-fit 属性，把它的值设置成 cover ..

你会发现，现在这个图像元素可以非常好的响应窗口的宽度 ... 还有窗口的高度 ...