Flexbox图片多设备适配及点击放大模态框布局异常问题求助

我目前遇到两个前端问题，想寻求大家的帮助：

• Flexbox内图片的多设备缩放适配问题：我希望通过媒体查询让Flexbox里的图片能在不同设备屏幕上合理适配，但一直没找到合适的方案。
• 点击模态框导致布局异常：我用JavaScript写的onClick模态框，触发后会改变页面布局，严重到我暂时不得不搁置这个功能。

我的代码情况如下：HTML里的图片初始尺寸是150px×150px，相关代码：

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

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

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

HTML代码 #

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

期望的布局效果：

当前实际的效果：

我目前用的媒体查询都是从教程里学的，但还没找到能解决我问题的方案。我想要实现的是：页面能适配所有屏幕尺寸，点击图片后能在页面内放大展示，同时不破坏原有布局和页面尺寸。希望大家能给我一些帮助或建议。

备注：内容来源于stack exchange，提问作者Daniel flatt