Блог

Главная - Вопросы по программированию - Упорядочить изображения по горизонтали / вертикали в соответствии с размером экрана в центре над фоновым изображением

Упорядочить изображения по горизонтали / вертикали в соответствии с размером экрана в центре над фоновым изображением

#html #css

#HTML #css

Вопрос:

В <body> <section> У меня есть фоновое изображение:

 <img src="img/background.png" class="back-img">

css:

 .back-img {
  width: 100%;
  height: auto;
  overflow:hidden;
}

вот так:

 <section> 
    <div id="topLine">
        <img src="img/background.png" class="back-img">                                      
    </div> 
</section>

Я пытаюсь выровнять разные отдельные квадратные изображения одинакового размера по горизонтали в центре над фоновым изображением в окне браузера с помощью position: fixed; , чтобы сохранить его в центре экрана с прокруткой и упорядочить по вертикали на экране мобильного устройства:

    <img src="img/square1.png" class="image">
   <img src="img/square2.png" class="image">
   <img src="img/square3.png" class="image">

.css:

 .image {
  position: fixed;
  width: 69px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

для архивирования чего-то вроде этого:

введите описание изображения здесь

Цвет фона подразумевает фоновое изображение, а белые квадраты — изображения того же размера.

Я пробовал этот пример:

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

с помощью:

 * {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

который не упорядочивает изображения, как требуется в моем случае, и должен выравнивать изображения в одну строку, но с position: fixed; у меня на экране только одно изображение.

Я пытаюсь найти какой-то правильный способ получить результат, возможно, с использованием <table> , <tr> <td> для автоматической организации различных изображений в соответствии с размером экрана от горизонтальной до вертикальной групповой линии с ручным сужением окна браузера.

Прежде всего, я должен повторить то же изображение в горизонтальной линии в центре над фоновым изображением в фиксированном положении:

введите описание изображения здесь

Любое руководство или пример были бы полезны

Ответ №1:

CSS grid или flex были бы идеальными для этого (при условии современных браузеров).

Мне непонятно, зачем вам нужен img элемент для вашего фонового изображения, но у меня было много причин в прошлом, поэтому для использования img элемента потребовалось бы немного больше.

Вот самый простой пример моей интерпретации того, что вы ищете: https://codepen.io/Ilkai/pen/abNdZQK

В основном:

  1. Настройте свой section с помощью background-image , а также используйте его в качестве источника размера контейнера (во весь экран с помощью 100 vw/vh )
 <section class="bg">
  ...
</section>
  
 .bg {
  background-image: url('...');
  background-size: cover;
  width: 100vw;
  height: 100vh;
}
  1. Создайте div, который будет предназначен для того, чтобы быть вашим родительским макетом, с использованием display: flex/grid (Flexbox немного старше Grid, поэтому у него немного лучшая поддержка). Расположите дочерние элементы с помощью align-items и justify-content .
 <section class="bg">
  <div class="layout">
    ...
  </div>
</section>
  
 .bg { ... }

.layout {
  width: inherit;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  1. Вы также примените свой медиа-запрос к макету div.
 .bg {...}

.layout {...}

@media (min-width: 720px) {
  .layout {
    flex-direction: row;
  }
}
  1. Добавьте свои img элементы в качестве дочерних элементов макета div, соответствующего размера.
 <section class="bg">
  <div class="layout">
    <img src="..." />
    <img src="..." />
    <img src="..." />
    <img src="..." />
  </div>
</section>
  
 .bg {...}

.layout {...}

@media (...) {}

.layout img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  margin: 1rem;
}

Если я неправильно понял, что вам нужно, дайте мне знать в комментариях

Комментарии:

1. Здравствуйте, извините за поздний повтор и пропущенный момент. Вы заметили «Мне не ясно, зачем вам нужен элемент <img>». Я должен изменить исходный цвет изображения на серый фильтр при наведении курсора мыши, в любом случае, это то же самое с background-image: url

Ответ №2:

С position: fixed изображения, вероятно, перекрываются.

Попробуйте поместить их в фиксированный элемент и разрешить им быть дочерними элементами в этом элементе, которые затем вы могли бы использовать display: inline block; text-align: center; или display: flex; justify-content: center; для достижения своей цели.

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