object-fit属性(可以用于img和video元素)，以控制它们的内容如何适应其容器

object-fit 属性

object-fit 是一个CSS属性，用于指定替换元素（如img或video）的内容如何填充其容器。object-fit: cover是该属性的一个值，它保证内容的宽高比保持不变，同时尽可能大地填充其容器，可能会裁剪掉一些内容以适应。

object-position 属性

object-position 属性用于指定内容在容器中的位置。如果使用了object-fit: cover，那么object-position可以控制被裁剪内容的显示位置。

CSS 代码示例

对于img元素：

img { width: 300px; height: 300px; object-fit: cover; object-position: left top; /* 可以是任何合法的值，如：center, 50% 50%, right bottom 等 */ }

对应的HTML：

<img src="example.jpg" alt="Description">

HTML5 video 元素

对于video元素，object-fit属性同样适用，但请注意，并非所有浏览器都支持在video元素上使用object-fit。在支持的浏览器中，您可以这样设置：

<video id="myVideo" width="300" height="300" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

CSS 可以这样设置：

#myVideo { object-fit: cover; object-position: left top; /* 可以是任何合法的值 */ }

注意事项

• object-fit 和 object-position 是CSS3的属性，因此确保您的目标浏览器支持这些属性。
• object-fit: cover 可能会导致内容被裁剪，所以请确保这是您预期的效果。
• 在使用video元素时，object-fit属性可能不被所有浏览器支持，因此您可能需要提供后备方案或者检测浏览器兼容性。

Vue.js 示例修正

在您提供的Vue.js代码片段中，有一些小错误需要修正：

<template> <video id="myVideo" :autoplay="false" @show-center-play-btn="false" :src="infolist.vedio" @error="videoErrorCallback" controls object-fit="cover" style="width: 300px; height: 300px; object-position: left top;" > Your browser does not support the video tag. </video> </template> <script> export default { // ... 其他脚本代码 }; </script>

请注意，object-fit 和 object-position 应该放在 style 属性中，因为Vue.js不直接支持这些属性作为指令或属性绑定。同时，确保:autoplay和@show-center-play-btn是有效的Vue.js属性绑定，且您的数据infolist.vedio是正确的视频源路径。