Расширение изображений по клику и медиа-запросам, запрос ⇐ CSS

[Anonymous]

Во-первых, проблема с медиа-запросом заключается в масштабировании изображения внутри гибкого поля для соответствия экрану на нескольких устройствах.
Во-вторых, у меня возникла проблема, когда мой Javascript 'onClick ' модальное окно в конечном итоге меняет мой макет до такой степени, что мне пришлось временно его отложить.
HTML — изображения имеют размер 150 пикселей^2

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

[img]./images/placeholder.jpg[/img]
[img]./images/iplaceholder.jpg[/img]
[img]./images/placeholder alt=[/img]


×

CSS

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

.flex-container {
display: flex;
flex-wrap: wrap;
background-color: transparent;
}
.flex-container > div {
background-color: transparent;
width: 150px;
height: 150px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.modal {
display: none; /* Hidden by default */
}

и, наконец, Javascript

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

function openModal(imgSrc) {
var modal = document.getElementById("myModal");

var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");

modal.style.display = "block";
modalImg.src = imgSrc;
}

Желаемые макеты — это изображения, на которые можно щелкнуть и развернуть их выше или ниже.
В отличие от того, что я получаю, нажмите, чтобы заставить все изображения с одной стороны, что не является большой проблемой, проблема в том, что при этом страница расширяется.
Мои медиа-запросы на данный момент - это только те, которые я видел в учебниках как Я их читаю/смотрю. поэтому я пока не нашел того, что ищу.

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

obile container utility class:
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

/* xs */
@media (min-width: 475px) {
.container {
max-width: 475px;
}
}
/* sm */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
/* md */
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media screen and (max-width:150px && max-height: 150px) {
#MyImg {
width: 100%;
height: 100%;
}

Будем признательны за любую помощь или подсказки.
Страница, которая может соответствовать любому размеру экрана, имеет изображения для масштабирования, всплывающие при нажатии (внутри страницы). ) без ущерба для макета или размера экрана

Подробнее здесь: https://stackoverflow.com/questions/793 ... ries-query