У меня есть каталог из 6 картинок. Я показываю их в 1 ряду. На больших экранах все 6 фотографий отображаются правильно, но когда я меняю ширину экрана на размер планшета мобильного размера, картинка обрезается пополам.
Я хочу, чтобы все 6 изображений отображалось на большом экране, но как только размер пользовательского окна показывает только изображение, которое может быть полностью показано в этом конкретном размере экрана, а другие должны скрываться. Прямо сейчас я использую переполнение: скрытый и контейнер фиксированного размера.
Ниже приведены некоторые скриншоты, чтобы показать проблему,
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 есть фиксированная ширина по высоте