2x2 图像响应图像网格

Question

我正在尝试在 2x2（水平 x 垂直）网格中制作图像网格。当屏幕尺寸调整为较小尺寸时，我希望这些图像以 1x4 垂直格式显示，以便它们保留大部分尺寸。我从各种网站上找到了几篇相关的文章，但它们的内容都填满了整个页面。这不是我想做的事。下图显示了 2x2 网格的外观。在调整大小的网站版本中，图像完全可以填满整个屏幕。我该怎么做？

我现在附上了一些屏幕截图，展示了我希望最终产品的大致外观，但用图像代替了红色方块。
e.g. desktop resolution
e.g. smartphone resolution

.imageLineTop {
 display: inline-block;
 width: 100%;
 height: 725px;
 top: 60%;
 left: 50%;
 transform: translate(50%, 50%);
}

.imageLineBottom {
 display: inline-block;
 margin-top: 45px;
 width: 100%;
 height: 725px;
 top: 60%;
 left: 50%;
 transform: translate(50%, 50%);
}

#img0 {
 height: 700px;
}

#img1 {
 height: 700px;
}

#img2 {
 height: 700px;
}

#img3 {
 height: 700px;
}

#fadeBox0 {
 width: 478px;
 height: 700px;
 background-color: black;
 opacity: 0.5;
 left: 24%;
 position: absolute;
 display: none;
}

#fadeBox1 {
 width: 478px;
 height: 700px;
 background-color: black;
 opacity: 0.5;
 right: 24%;
 position: absolute;
 display: none;
}

#fadeBox2 {
 width: 478px;
 height: 700px;
 background-color: black;
 opacity: 0.5;
 left: 24%;
 position: absolute;
 display: none;
}

#fadeBox3 {
 width: 478px;
 height: 700px;
 background-color: black;
 opacity: 0.5;
 right: 24%;
 position: absolute;
 display: none;
}

 <!--Top image line-->
  <section class="imageLineTop">
   <img class="discoverImage" id="img0" src="assets/imgs/1.jpg">
   <img class="discoverImage" id="img1" src="assets/imgs/2.jpg">

   <section id="fadeBox0">
    <h3 class="imageInlineTitle">Purity.</h3>
   </section>

   <section id="fadeBox1">
    <h3 class="imageInlineTitle">Style.</h3>
   </section>
  </section>

  <!--Bottom image line-->
  <section class="imageLineBottom">
   <img class="discoverImage" id="img2" src="assets/imgs/3.jpg">
   <img class="discoverImage" id="img3" src="assets/imgs/4.jpg">

   <section id="fadeBox2">
    <h3 class="imageInlineTitle">Integrity.</h3>
   </section>


   <section id="fadeBox3">
    <h3 class="imageInlineTitle">Courage.</h3>
   </section>
  </section>

Answer 1

我不太确定您的最终目标是什么，但是一旦 window 小于它们的实际大小，您可以让它们进入新行，方法是：

.img0, .img1, .img2, .img3 {position: relative}

切记在这种情况下不要使用百分比宽度。

请看下面的Fiddle。希望对您有所帮助。

https://jsfiddle.net/7rtb084r/

2x2 图像响应图像网格

2x2 Image Responsive Image Grid

html

css

image

responsive