Фон параллакса не будет ориентировать портрет иначе, чем на его стороне

Question

У меня есть изображение, которое я пытаюсь использовать для моего начального фона в стиле параллакса, который не меняет ориентацию.Это правильное соотношение сторон для портрета, но я никоим образом не отредактирую код или само изображение, оно не перестанет поворачиваться.

Я попытался использовать код перевода в моей CSS и попробовалцелые строки z-index и webkit, и я со временем узнал, что они все равно не сработают.Я не знаю, что еще попробовать.

            .parallax1 { 
      /* The image used */
      background-image: url("me.jpg");

      /* Set a specific height */
      height: 600px; 
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

Ожидаемый результат - альбомно-ориентированная версия моего портрета.Соотношение сторон является правильным для этого типа изображения, но фотография все еще растягивается и поворачивает портрет.

Answer 1

Возможно, вы захотите создать JSFiddle, чтобы продемонстрировать это, но, скорее всего, ваше значение background-size: cover; для свойства background гарантирует, что изображение заполнит весь ваш контейнер при сохранении соотношения сторон.Поскольку вы определили только высоту в вашем контейнере, ваша ширина, естественно, равна 100% (потому что div - это блочные элементы).Если ваш видовой экран или родительский контейнер заканчиваются более широкими, чем узкие, будет фоновое изображение:

https://jsfiddle.net/w4x3bq61/

Один из способов решения этой проблемы:чтобы установить ширину .parallax1, чтобы она всегда имела высоту относительно ширины, например:

.parallax1 { 
  /* The image used */
  background-image: url("");

  /* Set a specific height */
  height: 600px; 
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
}