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>

我已经将库页面的html和我所有的CSS发布到了CodePen。 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卡

1 个答案: