Параллельные изображения бок о бок с сохранением пропорций - PullRequest
Новая
       37

Параллельные изображения бок о бок с сохранением пропорций

4 голосов
/ 12 марта 2020

Я пытаюсь выполнить sh, разместив два параллакса background-image рядом, сохраняя их соотношение сторон. Проблема, с которой я сталкиваюсь, заключается в том, что каждое изображение кажется разрезанным пополам по вертикали. Я пытался использовать разные значения в background-attachment и background-size безрезультатно. Удаление background-attachment: fixed; из приведенного ниже кода устраняет проблему с соотношением сторон, но теряет эффект параллакса. Кто-нибудь знает, как выполнить одновременно sh оба? 

.image-left {
  width: 50%;
  float: left;
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: none;
  background-size: cover;
  background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}

.image-right {
  width: 50%;
  float: left;
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: none;
  background-size: cover;
  background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}

.content {
  text-align: center;
  padding: 100px 30px;
  font-size: 1.25rem;
  color: #fff;
  background-color: orange;
}
<div class="content">
  <h1>Lorem</h1>
</div>

<div class="image-left"></div>
<div class="image-right"></div>

<div class="content">
  <h1>Ipsum</h1>
</div>
Fiddle для вышеуказанного кода здесь .

Я также пытался использовать функцию jQuery из этой записи но не смог заставить его работать с соседними изображениями. ( см. Скрипку ) 

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});

Ответы [ 4 ]

4 голосов
/ 18 марта 2020

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

Поэтому я попробовал другой подход, который в основном состоит из: - Наличие двух разделов: один для изображений, другой для содержания. - Что касается изображений, оберните их в элемент и используйте фиксированное положение. Они расположены в самом верху элемента, если вы хотите изменить это, вы можете играть со свойством top. - Что касается содержимого, оба региона также упакованы в контейнер с абсолютной позицией. - Содержимое внизу будет отвечать за «дышащее» пространство на изображениях, поэтому вам нужно поиграть с margin-top для достижения желаемых результатов.

Некоторые соображения: - Данный пример работает на момент только на настольном компьютере, протестирован на полноэкранном ноутбуке (ширина около 1680 пикселей). - Если вы уменьшаете экран, все идет очень плохо, поэтому вам нужно настроить все показатели для мобильных устройств с помощью медиа-запросов. - Нижний элемент имеет атрибут min-height только для демонстрационных целей.

При всем, я не совсем уверен, рекомендую ли я это.

Можете ли вы на самом деле объединить оба изображения в один? Таким образом, вы можете просто использовать фоновый подход, и эта разработка не понадобится.

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

Надеюсь, это поможет! 

.image-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.image {
  width: 100%;
}

.content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.content {
  text-align: center;
  padding: 100px 30px;
  font-size: 1.25rem;
  color: #fff;
  background-color: orange;
}

.content-bottom {
  margin-top: 300px;
  min-height: 1000px;
}
<div class="image-wrapper">
  <img class="image"  src="https://www.gstatic.com/webp/gallery/1.webp">
  <img class="image"  src="https://www.gstatic.com/webp/gallery/2.webp">
</div>

<div class="content-wrapper">
  <div class="content">
    <h1>Lorem</h1>
  </div>
  <div class="content content-bottom">
    <h2>Ipsum</h2>
  </div>
</div>
3 голосов
/ 21 марта 2020

Как указал avcajaraville, лучший подход - это создать контейнер для изображений с фиксированным положением.

Вот мое решение, использующее эту идею, но работающее без необходимости настройки размера

Обратите внимание, что поскольку теперь изображения занимают только половину ширины экрана, они также покрывают и половину высоты. Это можно исправить с помощью изображений в портретном режиме. Чтобы получить более приятный результат с текущими изображениями, я добавил еще один ряд изображений, теперь с обратным порядком (видимым только для некоторых экранных крыс ios) 

.images {
  position: fixed;
  width: 100%;
  z-index: -1;
}

.images div {
  display: inline-block;
  width: 49%;
  margin: 0;
  height: 500px;
  background-position: center;
  background-size: cover;
}

.image-left {
  background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}

.image-right {
  background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}

.content {
  text-align: center;
  padding: 100px 30px;
  font-size: 1.25rem;
  color: #fff;
  background-color: orange;
}

.filler {
  height: 500px;
}
<div class="images">
  <div class="image-left"></div>
  <div class="image-right"></div>
  <div class="image-right"></div>
  <div class="image-left"></div>
</div>

<div class="content">
  <h1>Lorem</h1>
</div>

<div class="filler"></div>
<div class="content">
  <h1>Ipsum</h1>
</div>
0 голосов
/ 22 марта 2020 
<!DOCTYPE html>
<html>
<head>
    <title>galeri</title>
</head>
<body style="background-color: rgb(227, 242, 253);" >


<h1 style="font-size: 70px;color: blue;padding-left: 530px;" > PİCTURES </h1>
<table>
    <tr>
        <th><img  style="height: 300px;width: 400px;" src="C:\Users\PC\Desktop\HTML Ödevi\2605952_810x458.jpg"></th>
        <th><img  style="height: 300px;width: 400px;" src="C:\Users\PC\Desktop\HTML Ödevi\resized_e4436-2020-01-23t121815z_543457528_rc2ole9siek2_rtrmadp_3_china-health.jpg"></th>
    </tr>
    <tr>
        <th><img style="height: 300px;width: 400px;" src="C:\Users\PC\Desktop\HTML Ödevi\reuters-corona-12_16_9_1584545537.jpg"></th>
        <th><img  style="padding-left: 100px;border-radius: 100px;" src="C:\Users\PC\Desktop\HTML Ödevi\coronavirus.jpg"></th>
    </tr>
    <tr>
        <th><img  style="height: 300px;width: 400px;" src="C:\Users\PC\Desktop\HTML Ödevi\images (2).jpg"></th>
        <th><img  style="height: 300px;width: 400px;" src="C:\Users\PC\Desktop\HTML Ödevi\images (1).jpg"></th>
    </tr>
    <tr>
        <th><img  style="height: 300px;width: 400px;" src="C:\Users\PC\Desktop\HTML Ödevi\indir (1).jpg"></th>
        <th><img  style="height: 300px;width: 400px;" src="C:\Users\PC\Desktop\HTML Ödevi\images.jpg"></th>
    </tr>
</table>




</body>
</html>
0 голосов
/ 17 марта 2020 

.flexrow {
  display: flex;
  flex-flow: row wrap;
}
.flexrow > .image {
  flex: 0 1 50%;
  min-height: 350px;
  background-size: 100%;
}
.img1 {
  background-size: cover;
  background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;
}

.img2 {
  background-size: cover;
  background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;
}

.content {
  text-align: center;
  padding: 100px 30px;
  font-size: 1.25rem;
  color: #fff;
  background-color: orange;
}
<div class="content">
  <h1>Lorem</h1>
</div>

<div class="flexrow">
  <div class="image img1"></div>
  <div class="image img2"></div>
</div>

<div class="content">
  <h1>Ipsum</h1>
</div>

думаю, что это то, что вы ищете, помните, что свойство минимальной высоты на изображениях может нарушить это соотношение сторон, когда свободного места нет (при изменении размера, низкое разрешение).

...