javascripthtmlcssmedia-queries

expanding images on clickand a media queries, query

Firstly the media query I'm having issue with is scaling an image within a Flexbox to fit the screen on multiple devices.

Secondly I am having an issue where my Javascript onClick modal is ultimately changing my layout to the point I've had to shelf it for the time being.

HTML - the images are at 150px^2:

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%;
  }
<div class="flex-container">
  <div><img src="./images/placeholder.jpg" alt="box 1" id="myImg" onclick="openModal(this.src)"></div>
  <div><img src="./images/iplaceholder.jpg" alt="box 2" id="myImg" onclick="openModal(this.src)"></div>
  <div><img src="./images/placeholder alt="box 3" id="myImg" onclick="openModal(this.src)"></div>
</div>

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

The desired layout:

little ones are images to be clicked on and expanded either above ore below

vs

what I am getting:

on click it forces all images to one side, which is not too much of an issue, the problem is while it does that it expands the page

My media queries at the moment are just ones I have seen in tutorials as I'm reading/watching them. so I have currently not found what i am looking for.

Any help or pointers would be appreciated.

A page that can fit every screen size, have images to scale pop up on click(within the page) without compromising the layout or screen size.

Solution

  • Here is a snippet which demonstrates how to get three images to sit in a row and resize to fit the page width. Does that answer one of your questions?

    body {
  margin: 1em;
  background: yellow;
}

.flex-container {
  display: flex;
  gap: 1em;
}

.flex-container > * {
  flex-grow: 1;
}

.flex-container img {
  width: 100%;
}
    <div class="flex-container">
  <div>
    <img src="https://picsum.photos/id/729/300">
  </div>
  <div>
    <img src="https://picsum.photos/id/791/300">
  </div>
  <div>
    <img src="https://picsum.photos/id/1072/300">
  <div>
</div>