У меня каталог из 6 картинок. Я показываю их в 1 ряд. На больших экранах все 6 фотографий отображаются правильно, но когда я изменяю ширину экрана на размер планшета мобильного размера, изображение уменьшается вдвое.
Я хочу, чтобы все 6 изображений отображались на большом экране, но, как только размер окна пользователя, отображается только изображение, которое может быть полностью отображено в этом конкретном размере экрана, а другие должны быть скрыты. Сейчас я использую overflow: hidden и контейнер фиксированного размера.
Ниже приведены несколько снимков экрана, на которых показана проблема.
3 ответа
Вопрос слишком общий, но я думаю, что это образец для него.
Добавьте стили ниже к изображениям обертывания 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:contain, если у вас img есть исправленные height width
.container img{ width: 100%;}
Вот расширенное решение амира махди дигбари в действии.
Вы можете добиться того же с помощью 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>Удачного кодирования!