点击扩展图像和媒体查询，查询

Question

首先，我遇到的问题是缩放 Flexbox 中的图像以适合多个设备上的屏幕。

其次，我遇到了一个问题，我的 Javascript

onClick

模式最终改变了我的布局，以至于我不得不暂时搁置它。

HTML - 图像位于

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>

所需布局：

对

我得到了什么：

我目前的媒体查询只是我在阅读/观看教程时在教程中看到的。所以我目前还没有找到我要找的东西。

任何帮助或指示将不胜感激。

页面可以适合各种屏幕尺寸，单击时会弹出可缩放的图像（在页面内），而不会影响布局或屏幕尺寸。

Answer 1

这就是你想要达到的效果吗？

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

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

img {
  width: 100%;
}

<div class="flex-container">
  <div>
    <img src="https://picsum.photos/id/729/200">
  </div>
  <div>
    <img src="https://picsum.photos/id/791/200">
  </div>
  <div>
    <img src="https://picsum.photos/id/1072/200">
  <div>
</div>