我有一个在引导程序中创建的网站,所以当我在手机或平板电脑上导航栏时,所有其他内容都会调整到屏幕尺寸,但是我添加了3个框和2个youtube视频,我希望它们在调整到屏幕尺寸时我使用手机或平板电脑。在我的桌面上看起来还不错,但是当我在手机上看时,视频和盒子就不在屏幕上了。
有人可以帮我尽快完成这项工作,完成这项工作非常重要。有人可以一步一步地指导我吗?
以下是一些屏幕截图:
HTML对于仅是图像的3个框
<div class="img1">
<a href="link"><img src="img"></a>
</div>
<div class="img2">
<a href="link"><img src="img"></a>
</div>
<div class="img3">
<a href="link"><img src="img"></a>
</div>
CSS:
.img1 {
position: relative;
left: 290px;
bottom: -20px;
}
.img3 {
position: relative;
left: 578px;
bottom: 101px;
}
.img2 {
position: relative;
left: 865px;
bottom: 222px;
}
多数民众赞成在我的桌面上看起来
这就是平板电脑尺寸的样子,您可能可以想象它在手机上的外观
如果您想自己看看http://www.praga-light.de,那么youtube视频就很好,就像我想要的那样,但是当您调整浏览器大小的3个框时,它们就不在屏幕上了。
最佳答案
您需要在移动设备上更改YouTube视频的宽度大小吗?
您将div包装添加到视频代码中,
<div class="ResponsiveVideoWrapper">
<iframe width="854" height="480" src="https://www.youtube.com/embed/CqVqlcBQGYw" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS:
.ResponsiveVideoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.ResponsiveVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
关于html - 在手机或平板电脑上时,如何使用 bootstrap 来图片或视频调整屏幕大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41322939/