css bootstrap полный экран проблема

Question

Я смог установить полноэкранный фон на своем веб-сайте. Это выглядит следующим образом:

Проблема заключается в том, когда я сделать окно меньше. Это выглядит следующим образом:

И если я прокручивать сайт, результат это уродливая вещь:

Вы знаете, как я мог бы решить эту проблему? У меня такая же проблема, когда я пытаюсь увидеть сайт с мобильного телефона:

Как только проблема была statedm давайте посмотрим код:

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> 

.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/

EDIT

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) И сделать две фотографии в одной.