Erweitern von Bildern per Klick und einer Medienabfrage, Abfrage ⇐ HTML

[Guest]

Erstens besteht die Medienabfrage, mit der ich ein Problem habe, darin, ein Bild in einer Flexbox so zu skalieren, dass es auf den Bildschirm mehrerer Geräte passt.
Zweitens habe ich ein Problem, bei dem mein Javascript „onClick ' modal verändert letztendlich mein Layout so weit, dass ich es vorerst zurückstellen musste.
HTML – die Bilder haben eine Größe von 150px^2

Code: Select all

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


×

CSS

Code: Select all

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

und schließlich Javascript

Code: Select all

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

Das gewünschte Layout besteht aus Bildern, die entweder oben oder unten angeklickt und erweitert werden können
Im Gegensatz zu dem, was ich bekomme, werden beim Klicken alle Bilder erzwungen Auf der einen Seite, was kein allzu großes Problem darstellt, besteht das Problem dabei darin, dass die Seite erweitert wird.
Meine Medienabfragen im Moment sind nur solche, die ich in Tutorials gesehen habe Ich lese/schaue sie. Daher habe ich derzeit nicht gefunden, wonach ich suche.

Code: Select all

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

Jede Hilfe oder Hinweise wären willkommen
Eine Seite, die auf jede Bildschirmgröße passt und bei der beim Klicken skalierbare Bilder auf der Seite eingeblendet werden ), ohne das Layout oder die Bildschirmgröße zu beeinträchtigen