我有 flexbox 布局 onclick 我想用更大的图像替换一些图像答案

【问题标题】：I have flexbox layout onclick i want to replace some images with one bigger我有 flexbox 布局 onclick 我想用更大的图像替换一些图像
【发布时间】：2020-09-10 15:40:38
【问题描述】：

Onclick 我想将第一个元素中的第一个图像更改为另一个更大并且从 flexbox 中占用 3 个空格的图像。我尝试自己做，点击后隐藏 2 张图片没问题，但我无法将更改后的图片放大以适应 flexbox。

function changeImage() {
document.getElementById("imgClickAndChange").src = "someimagepath";
  var x = document.getElementById("imgClickAndChange1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

.container1 {
  display: flex;
  width: 100%;
  height: 300px;
}

.container1 div{
  color: white;
  height: 100%;
}

.sub-wrap {
  flex: 0 0 50%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.sub-wrap div {
  height: 50%;
}
.w-25 {
  flex: 0 0 25%;
}
.w-small {
  flex: 0 0 33%;
}
.w-double {
  flex: 0 0 66%;
}

<div class="container1">
  <div class="w-25"><img src="image" id="imgClickAndChange" onclick="changeImage()"></img></div>

  <div class="sub-wrap">
    <div class="w-small"><img src="image"id="imgClickAndChange1"></div>
    <div class="w-double"><img src="image" ></div>
    <div class="w-small"><img src="image" ></div>
    <div class="w-small"><img src="image" ></div>
    <div class="w-small">  <img src="image"></div>
  </div>

  <div class="w-25"> <img src="image"></div>
</div>

【问题讨论】：

添加html代码...
如果我给你示例代码与 flexbox.. 会好吗？...你会自己做
我可以回答吗？你需要吗？
检查我的答案..还有什么需要发表评论..

标签： javascript css flexbox

【解决方案1】：

这是一个示例代码....

使用flex:2 代替flex: 0 0 50%; 到.sub-wrap 类和flex:1 到.w-25 类.. 用于技巧..

Array.from(document.querySelectorAll('.img')).forEach(function (el) {
          
        el.addEventListener('click', function (e) {
  
          flexShrink();
          e.target.style.flexGrow = '2';
        });
      });

      function flexShrink() {
        Array.from(document.querySelectorAll('.img')).forEach(function (el) {
          el.style.flexGrow = '1';
        });
      }

 * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      #main {
        width: 100%;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
      }
      .item {
        flex-grow: 1;
      }

<div id="main">
     
      <div class="item img" style="background-color: lightblue">img</div>
      <div class="item" style="background-color: khaki"></div>
      <div class="item img" style="background-color: pink">img</div>
   
    </div>

【讨论】：