Медиа-запросы для изменения положения изображений - PullRequest
Новая
       4

Медиа-запросы для изменения положения изображений

0 голосов
/ 12 апреля 2020

Я использую медиа-запросы, чтобы сделать мой сайт более отзывчивым, но я не уверен, как это сделать с изображениями. Я использовал position: absolute, иначе, когда экран стал очень узким, изображения «выходили бы» из ширины экрана и исчезали влево. Поэтому я хотел бы, чтобы они могли оставаться в центре, но либо с меньшим размером, либо в виде столбца, что я не могу понять, как обойтись без их нахождения друг на друге. Может ли кто-нибудь помочь мне с этим?

Поскольку у вас не будет изображений, чтобы увидеть фактический эффект, это выглядит так, как на экране с широкой шириной:

enter image description here

Вот как это выглядит со свойствами, которые я использовал для их центрирования на узком экране:

enter image description here

и еще более узкий

enter image description here

Это код, который я использовал: 

    @media screen and (max-width: 1100px) {
  .header-container.row,
  .section-1.row,
  .section-2.row,
  .section-3.row,
  .section-5.row,
  .section-6.row,
  .section-7.row {
    flex-direction: column;
    .work-images {
      position: relative;
    }
    .first-line.row,
    .second-line.row {
      display: flex;
      flex-direction: column;
      position: absolute;
      justify-content: center;
    }
    .pcontainer {
      width: 350px;
    }
    .first-line img,
    .second-line img {
      width: 100%;
      height: 250px;
      object-fit: cover;
    }
<div class="row work-images">
  <div class="row first-line">
    <div class="pcontainer">
      <img src="magazine.jpg" width="333.33" height="250" class="image" />
    </div>
    <div class="pcontainer">
      <img src="Magazine3.jpg" width="333.33" height="250" class="image" />
    </div>
  </div>
  <div class="row second-line">
    <div class="pcontainer">
      <img src="poster.png" max-width="450" height="250" class="image" />
    </div>
    <div class="pcontainer">
      <img src="poster2.png" max-width="450" height="250" class="image" />
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 12 апреля 2020

Нет необходимости использовать абсолютное позиционирование элементов. Я сделал адаптивный дизайн, используя flex. Я предполагаю, что именно так вы хотите, чтобы изображения были выровнены на странице. Прокомментируйте ваши вопросы относительно дизайна. 

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20%;
  justify-content: center;
}

.column {
  flex: 50%;
  max-width: 50%;
  padding: 15px;
}

.column img {
  width: 100%;
}

@media (max-width: 800px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .row {
    padding: 0 10%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="row">
    <div class="column">
      <img src="magazine.jpg" />
    </div>

    <div class="column">
      <img src="Magazine3.jpg" />

    </div>

    <div class="column">
      <img src="poster.png" />
    </div>

    <div class="column">
      <img src="poster2.png" />
    </div>
  </div>
</body>

</html>
...