Показать полные картинки в каталоге

Question

У меня есть каталог из 6 картинок. Я показываю их в 1 ряду. На больших экранах все 6 фотографий отображаются правильно, но когда я меняю ширину экрана на размер планшета мобильного размера, картинка обрезается пополам.

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

Ниже приведены некоторые снимки экрана, на которых показана проблема:

Answer 1

Вопрос слишком общий, но я думаю, что это был бы пример для него.

добавьте ниже стили к изображениям div wraps.

.wrapper {
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;

   // the following styles are optional but you must specify width and height
   width: 100%;
   height: 320px;
   padding: 20px;
}

и добавьте эти стили к изображениям.

img {
   height: 100%;
   width: auto;

   // optional
   margin-right: 50px;
   margin-top: 50px;
}

Стили обертки заставляют изображения переноситься в несколько строк, если они увеличивают ширину обертки, а overflow: hidden показывает, что только одна строка показывает

Answer 2

Вот расширенное решение amir mahdi digbari в действии.

Вы можете добиться того же с сеткой CSS, но для этого достаточно flexbox.

.img {
  height: 200px;
  width: 200px;
  border: 1px solid red;
}

.wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 200px;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 2px solid blue;
}

.container {
  width: 1250px;
  max-width: 100%;
  margin: auto;
}

<div class="container">
  <div class="wrapper">
    <div class="img">Img1</div>
    <div class="img">Img2</div>
    <div class="img">Img3</div>
    <div class="img">Img4</div>
    <div class="img">Img5</div>
    <div class="img">Img6</div>
  </div>
</div>

Удачного кодирования!

Answer 3

Используйте width:100% для img тега в html

ИЛИ

Вы можете использовать его в своей таблице стилей как

img{
  width:100%;
}

, также попробуйте использоватьobjectfit:contain если у вас img есть фиксированный height width