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

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

Ниже приведены некоторые скриншоты, чтобы показать проблему,

Screenshot of Catalog on Larger Screens

Screenshot of Catalog on Medium Size Screen

Screenshot of Catalog on Mobile Size Screen

0
Saiem Khan

2 ответа

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

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

.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 отображает только одну строку

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

ИЛИ ЖЕ

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

img{
  width:100%;
}

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

58587578