Подгонка div с изображениями по высоте экрана

ProgramBox

Подгонка div с изображениями по высоте экрана

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

#html #css

#HTML #css — код

Вопрос:

У меня есть простой div, который имитирует таблицу с изображениями, которые будут выглядеть так, и некоторый стиль, мне удалось использовать CSS для подгонки изображений по ширине контейнера (контейнер как браузер или другой div), но у меня действительно проблемы с высотой, так можно ли сделать так, чтобы изображения соответствовали ширине и высоте, которые способ?

 .cabinet {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.module {
  display: table-cell;
}

.module button {
  border-color: black;
  border-style: solid;
  border-width: thin;
}

.module img {
  width: 100%;
}

 <div class="cabinet">
  <div class="rack">
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
  </div>
  <div class="rack">
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
    <div class="module">
      <button>
                <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
            </button>
    </div>
  </div>
</div>

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

1. это (высота) фактически соответствует размеру экрана. в чем тогда проблема?

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

3. о, если это так, используйте grid. Flex в основном используется для управления элементами, имеющими одно направление (1 строка / столбец). Подойдет сетка

Ответ №1:

Я немного переработал ваш код. Удалены ненужные HTML и CSS . Посмотрите, тот ли это результат, который вы хотите.

 .cabinet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
}
img {
  width: 100%;
  object-fit: cover;
  border: 1px solid #000;
}

 <html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div class="cabinet">
      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>

      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>

      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>

      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>

      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>

      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>

      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>

      <div class="module">
        <img
          src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
        />
      </div>
    </div>
  </body>
</html>

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

1. @Войцех Сабович: Это то поведение, которого вы хотите. Дайте мне знать 🙂

2. он должен соответствовать размеру экрана или , в данном случае , контейнера со 100vh

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

4. сначала даже я был немного смущен. Но из того, что я понял, он хочет уместить эти 8 изображений в размер экрана. с помощью класса bootstrap это можно сделать легко. idk как это сделать с помощью flex