Question

我已经能够在我的网站上设置全屏背景。它看起来像这样：

问题在于我将窗口缩小了。它看起来像这样：

如果我向下滚动网站，结果就是这个丑陋的东西：

你知道我怎么解决这个问题？当我尝试通过手机查看该网站时，我遇到同样的问题：

问题解决后，请查看代码：

HTML：

<div class="slides fullscreen-bg fullscreen-bg__img text-center">
        <p id="slide1" style="width: 100%; float: left; margin-right: -100%;  opacity:1;  ">
            <img  class="img-responsive" alt="Panoramic view from the window of one of the penthouses" src="~/Content/Images/Portada2.jpg" height: "auto">
        </p>
        <p id="slide2" style="width: 100%; float: left; margin-right: -100%; opacity:0; ">
            <img class="img-responsive" alt="Panoramic view from the window of one of the penthouses" src="~/Content/Images/Portada.JPG">
        </p>
    </div>

CSS

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;

}

.fullscreen-bg__img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
    height: 100%;
    color:#000; 
    -webkit-filter: brightness(0.5);
}

.img-responsive {

    margin: 0 auto;
}

.logo {

    position: relative;
    margin-top: -15%;
}

我留下了一个链接到网站，以防你想重现错误：

http://ulrickpsp-001-site1.smarterasp.net/

修改

Answer 1

.slides p {
    width: auto !important;
}
.slides p img {
    min-height: 100%;
}

这并不完美。在非常高的纵向纵横比下，您会出现图像失真。如果你的图像是div元素的背景会更好。

Answer 2

如果你用作背景请。我们有css3属性background-size: cover 或者，如果你作为HTML需要从javascript。 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 3

在照片程序中编辑照片（f.exam PhotoFiltre）并将这两张照片合二为一。

css bootstrap全屏问题

3 个答案: