Галерея на основе сетки - проблема с переполнением контента и соотношением изображений

ProgramBox

Галерея на основе сетки — проблема с переполнением контента и соотношением изображений

Post author:admin
Запись опубликована:17 ноября, 2022
Post category:Вопросы по программированию

#html #css #flexbox #css-grid

#HTML #css — код #flexbox #css-сетка

Вопрос:

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

 html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.main-container {
  height: 100%;
  width: 100%;
  margin: 0 10%;
  display: flex;
  flex-direction: column;
}

.searchbox {
  margin-bottom: 20px;
}

.gallery {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 20%);
  gap: 20px;
  justify-items: center;
}

.image-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

img {
  display: block;
  flex: 9;
  min-height: 0;
}

.title {
  flex: 1;
}

.pagination {
  margin-top: 20px;
}

 <div class="main-container">
  <div class="searchbox">SEARCHBOX</div>
  <div class="gallery">
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/300/200"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/200"/>
      <div class="title">TITLE</div>
    </div>
     <div class="image-container">
      <img src="https://placekitten.com/400/300"/>
      <div class="title">TITLE</div>
    </div>
      <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
     <div class="image-container">
      <img src="https://placekitten.com/100/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/100/100"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/200"/>
      <div class="title">TITLE</div>
    </div>
     <div class="image-container">
      <img src="https://placekitten.com/300/100"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
     <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
      <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
     <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
     <div class="image-container">
      <img src="https://placekitten.com/200/300"/>
      <div class="title">TITLE</div>
    </div>
  </div>
  <div class="pagination">PAGINATION</div>
</div>

Развернуть фрагмент

В моей галерее будет 20 изображений на странице (4×5). Изображения могут быть разных размеров — некоторые могут быть горизонтальными, некоторые вертикальными, некоторые квадратными.

Проблемы, которые у меня есть:

Изображения масштабируются таким образом, что не сохраняется их исходное соотношение
«Приложение» занимает не только 100% высоты — оно занимает больше, и мне нужно прокручивать. В идеале 100% должно приниматься всегда
Раздел «разбивка на страницы» приземлился где-то внутри сетки. Он должен быть размещен под сеткой.

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

Что не так с моим CSS?

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

Ответ №1:

Сначала выньте высоту и ширину из вашего html, body — это напрямую влияет на размеры вашего изображения

 html, body {margin:0; padding:0;}

Затем удалите поле из вашего основного контейнера, это вызывает переполнение. Может быть, вы хотели использовать отступы?

 .main-container {
  height: 100%;
  width: 100%;
  /*margin: 0 10%;*/ <--- Remove
  display: flex;
  flex-direction: column;
}

После этого вы можете использовать свойство object-fit для выравнивания позиций вашего изображения 🙂 Однако очень важно, чтобы были заданы ваши высота и ширина!

 img {
  display: block;
  flex: 9;
  min-height: 0;
  width:300px;
  max-height:300px;
  object-fit:cover;
}

Надеюсь, это поможет! https://jsfiddle.net/1txLvoh6 /

1. Спасибо за ваш вклад. Я вижу некоторую проблему в вашей версии: приложение по-прежнему требует прокрутки. В идеале все изображения должны быть масштабированы так, чтобы вся страница помещалась в представлении; разделитель страниц по-прежнему находится внутри сетки.

2. О, я понимаю, ну тогда продолжайте и добавьте height:100% обратно в html, body css и дайте мне знать!

Ответ №2:

Я бы предпочел этот вариант:

 html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.main-container {
    width: 80%;
    margin: 0 10%;
    display: grid;
    grid-gap: 20px;
    grid-template-rows: 1em max-content 1em;
    grid-template-columns: 1fr;
}

.searchbox {
    /* your styles for searchbox */
}

.gallery {
    display: grid;
    /* columns can be equal too, using calc and without justification on center */
    grid-template-columns: repeat(4, 1fr);
    /* 4 gaps between rows   2 gaps above and below of gallery   search and pager heights */
    grid-template-rows: repeat(5, calc(20vh - 2em));
    grid-gap: 20px;
    justify-items: center;
}

.image-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

img {
    display: block;
    flex: 9;
    min-height: 0;
    object-fit: cover;
}

.title {
    flex: 1;
}

.pagination {
    /* your styles for pagination */
}