Автоматически изменять размер контейнера и изображений для браузера на мобильном телефоне ⇐ Html

[Anonymous]

У меня есть страница cshtml, и приведенный ниже HTML-код отлично отображается в браузере ПК/ноутбука. Но в браузере мобильного телефона, например iPhone, jpg Yl8a7fN.jpeg (550x550px) не подходит, что заставляет пользователя прокручивать страницу вправо. То же самое происходит с четырьмя jpg-файлами в элементе table2 (пользователь прокручивает по горизонтали, чтобы увидеть все 4 изображения).
Итак, вопрос: как я могу отредактировать HTML-код ниже, чтобы размер 550x550 пикселей уменьшался до места в браузере и перемещался ниже первого блока текста (а не в сторону)?
В случае второй таблицы «table2», вместо четырех jpg-файлов, отображаемых рядом с каждым другие по горизонтали, размер каждого из них также будет изменен в соответствии с доступным пространством, и они будут отображаться вертикально, а не горизонтально (т. е. один под другим).
Другими словами, пользователю придется прокручивать только вниз, а не по горизонтали.
Это HTML (я также включаю версию в codepen):

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

Excepteur sint occaecat cupidatat non proident



occaecat cupidatat non



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.



Lorem ipsum dolor sit amet


[img]https://i.imgur.com/YlFZ0iX.jpeg[/img]



[img]https://i.imgur.com/Yl8a7fN.jpeg[/img]

















[img]https://i.imgur.com/Nxdh1jV.jpeg[/img]


[img]https://i.imgur.com/Nxdh1jV.jpeg[/img]


[img]https://i.imgur.com/Nxdh1jV.jpeg[/img]


[img]https://i.imgur.com/Nxdh1jV.jpeg[/img]

На моем iPhone это будет выглядеть примерно так, как показано ниже, так что пользователю нужно будет прокручивать только вниз, а не вправо.



Подробнее здесь: https://stackoverflow.com/questions/794 ... bile-phone