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

[Anonymous]

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

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

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;
}

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

.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 */
}

.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