创建选项卡式图片库 - 更改我的 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;
}

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

Creating tabbed image gallery - changes my flexbox cards

html

css

image

gallery