创建选项卡式图像库 - 更改我的 flexbox 卡

Question

我正在为网站上的页面使用 W3C 选项卡式图片库。它工作得很好，除了它重新格式化了我使用过 flexbox 卡片库的其他页面。卡片中的图像会失真，卡片本身也会变薄。

我需要帮助的另一个问题是将放大的图像居中并减小图像的大小。

< script >
  function myFunction(imgs) {
    var expandImg = document.getElementById("expandedImg");
    var imgText = document.getElementById("imgtext");
    expandImg.src = imgs.src;
    imgText.innerHTML = imgs.alt;
    expandImg.parentElement.style.display = "block";
  } <
  /script>

/*styling for gallery page images*/

* {
  box-sizing: border-box;
}


/*The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/*Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container-gallerypage {
  position: relative;
  display: none;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: white;
  font-size: 20px;
  text-align: center;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<div class="row">
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). 
    " style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container-gallerypage">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:80%">
  <div id="imgtext" style="text-align: center;width:75%;"></div>
</div>

我已经在 CodePen 发布了画廊页面的 html 和我所有的 css。 https://codepen.io/Ovimel/pen/YgzVeg

我要复制的 W3C 页面在这里 - https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

注意：我是每隔几年一次的初学者编码器，正如您从 css 中看到的那样，我正在网络上收集代码来创建这个页面，所以我不太了解项目在哪里以及如何影响彼此。如果您的解释非常简单，那将会有所帮助。而且，我不确定我什至发布了您需要帮助我的内容。 TIA

Answer 1

在示例代码中，他们使用了相同宽度和高度的图像，因此不会有任何设计中断。但在您的情况下，您使用的图片尺寸会破坏这些设计。

您能否尝试此代码并检查这是否解决了您的问题。

.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.container-gallerypage {
position: relative;
display: none;
text-align: center;
}