全屏宽度幻灯片

Question

我无法将幻灯片放映到全屏状态。在我的home.html.erb中，我有以下代码：

<div class="containerfull">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides {display:none; background-size: cover;}
</style>


<div class="containerfull" style="background-size: cover;">
<img class="mySlides" src="https://imagejournal.org/wp-content/uploads/bb- 
plugin/cache/23466317216_b99485ba14_o-panorama.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

</div>

我将图片设置为width：100％，并制作了一个div容器，其宽度为100％。

但是当我重新加载浏览器并检查我的网站时，我的home.html.erb代码放置在宽度为80％的div容器中。但是我的home.html.erb代码中没有这个div容器。 我不知道这个div的来源，因此无法更改80％的任何内容。

有什么想法吗？

Answer 1

您可能希望将样式文件放入一个.css文件。.但这是我所做的并且有效的..

<img class="mySlides" src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" style="min-width:100%; height:50%; position:fixed; top: 0; left: 0;"/>

1. 我做了min-width:100%;，而不是宽度。.
2. 添加了height:50%;（不确定您要做什么）。.
3. 添加了position:fixed;
4. 添加了top:0;
5. 添加了left:0;