Vuetify:在旋转木马幻灯片中最大化视频大小
Vuetify:在旋转木马幻灯片中最大化视频大小
提问于 2019-05-10 03:43:01
我正在与Vuejs和Nuxt合作，并希望在vuetify carousel组件中显示一个视频：
这可以在这里看到：
https://codepen.io/anon/pen/MqBEqb
这是工作大小，但我想调整大小的视频，以填补旋转木马幻灯片。我试过了：
<iframe width="auto" height="auto" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'和
<iframe width="max" height="max" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'但这并没有改变。如何最大化视频大小？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-10 04:03:37
宽度或高度属性没有max值:最接近的是使用100%。但是，使用height: 100%将不起作用:原因是它必须相对于某个值。
Vuetify的carousel has a default height of 500px，所以如果您设置<iframe>元素的宽度为100%，高度为500px，那么应该可以解决这个问题，例如：
#app iframe {
width: 100%;
height: 500px;
}请参阅更新的Codepen：https://codepen.io/anon/pen/VOegwN
如果您想要保护您的设置不受未来的影响(即保护您自己不受默认轮播高度的影响)，则应明确设置高度：
<v-carousel v-bind:height="500">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56066528
复制相关文章
相似问题