Изображения переполнены за пределы div, а не сокращаются ⇐ Html

[Anonymous]

Я довольно новичок в HTML-кодировании, поэтому я не уверен, что я делаю неправильно, но я строю веб-сайт с галереей изображений на одной из страниц. Обе изображения галереев имеют ширину, установленную на 100%, так что изображения «сокращаются», чтобы соответствовать Div из галереи. хочу, чтобы они были отзывчивыми.

Код: Выделить всё

[img]img/gb01.gif[/img]
[img]img/gb02.gif[/img]
[img]img/gb03.gif[/img]
[img]img/lvl1.jpg[/img]
[img]img/lvl2.jpg[/img]
[img]img/lvl3.jpg[/img]

[img]img/sreenshot01.jpg[/img]
[img]img/sreenshot02.jpg[/img]
[img]img/sreenshot03.jpg[/img]



< /code>
css < /p>
.page-content {
display: flex;
flex-flow: column;
justify-content: center;
grid-gap: 20px;
max-width: 850px;
}

.gallery img {
border-radius: var(--corner-rounding);
max-width: 100%;
}

.gallery {
display: flex;
flex-flow: row wrap;
grid-gap: 1em;
align-items: baseline;
justify-content: center;
}

.line {
display: flex;
flex-flow: row nowrap;
}

Есть идеи, что я должен с этим делать?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -shrinking