gpt4 book ai didi

html - 响应式 iFrame 不适合容器

转载 作者:行者123 更新时间:2023-11-28 07:27:24 25 4
gpt4 key购买 nike

我的网站上有一个响应式 iFrame,但是在大多数非移动屏幕上查看它时,它不适合容器的大小。我怎样才能让 iFrame 拉伸(stretch)到容器大小或让容器不超过我的 iFrame 当前最大大小?提前致谢。

站点是Waterlessbuddys.com稍微向下滚动,您会找到 iFrame。

.embeded-video {
position: relative
}

.embeded-video .ratio-img {
display: block;
width: 100% !important;
height: auto !important;
}

.embeded-video IFRAME {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="embeded-video">
<img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" />
<iframe src="http://abc11.com/video/embed/?pid=835255"></iframe>
</div>

最佳答案

enter image description here

这是你想要的吗?如果是这样,您可以继续阅读..

  1. 设置<body>在 iframe 中:style=margin:0
  2. 设置<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject"> : style=position:relative;display:block

完成!

关于html - 响应式 iFrame 不适合容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31736278/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com