2x2图像响应式图像网格
我试图在2x2（水平x垂直）网格中制作图像网格。当屏幕尺寸缩小时，我希望这些图像以1x4垂直格式显示，以便它们保留大部分尺寸。我发现了几个来自不同网站的相关文章，但它们都有内容填满整个页面。这不是我想要做的事情。下图显示了2x2网格的外观。在网站的大小版本上，图像填满整个屏幕是完全可以的。我会如何去做这件事？2x2图像响应式图像网格
我现在已经包含了一些关于如何粗略看看最终产品的截图，但图像取代了红色正方形。
e.g. desktop resolution
e.g. smartphone resolution
.imageLineTop {
\t display: inline-block;
\t width: 100%;
\t height: 725px;
\t top: 60%;
\t left: 50%;
\t transform: translate(50%, 50%);
}
.imageLineBottom {
\t display: inline-block;
\t margin-top: 45px;
\t width: 100%;
\t height: 725px;
\t top: 60%;
\t left: 50%;
\t transform: translate(50%, 50%);
}
#img0 {
\t height: 700px;
}
#img1 {
\t height: 700px;
}
#img2 {
\t height: 700px;
}
#img3 {
\t height: 700px;
}
#fadeBox0 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t left: 24%;
\t position: absolute;
\t display: none;
}
#fadeBox1 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t right: 24%;
\t position: absolute;
\t display: none;
}
#fadeBox2 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t left: 24%;
\t position: absolute;
\t display: none;
}
#fadeBox3 {
\t width: 478px;
\t height: 700px;
\t background-color: black;
\t opacity: 0.5;
\t right: 24%;
\t position: absolute;
\t display: none;
}\t <!--Top image line-->
\t \t <section class="imageLineTop">
\t \t \t <img class="discoverImage" id="img0" src="assets/imgs/1.jpg">
\t \t \t <img class="discoverImage" id="img1" src="assets/imgs/2.jpg">
\t \t \t <section id="fadeBox0">
\t \t \t \t <h3 class="imageInlineTitle">Purity.</h3>
\t \t \t </section>
\t \t \t <section id="fadeBox1">
\t \t \t \t <h3 class="imageInlineTitle">Style.</h3>
\t \t \t </section>
\t \t </section>
\t \t <!--Bottom image line-->
\t \t <section class="imageLineBottom">
\t \t \t <img class="discoverImage" id="img2" src="assets/imgs/3.jpg">
\t \t \t <img class="discoverImage" id="img3" src="assets/imgs/4.jpg">
\t \t \t <section id="fadeBox2">
\t \t \t \t <h3 class="imageInlineTitle">Integrity.</h3>
\t \t \t </section>
\t \t \t <section id="fadeBox3">
\t \t \t \t <h3 class="imageInlineTitle">Courage.</h3>
\t \t \t </section>
\t \t </section>
我也不太确定你的最终目标是什么在这里，但你可以让你的形象走上新线一旦窗口是比实际小大小通过给他们：
.img0, .img1, .img2, .img3 {position: relative}
记住不要在这种情况下使用百分比宽度。
请看下面的小提琴。希望它有帮助。
非常感谢！既然提出这个问题，我已经设法做出类似的事情，但我仍然在努力，因为我也希望“网格”能够随时处于中心位置。因此，当它是2×2时，连续两幅图像之间的中点在屏幕宽度的50％处，然后在调整到1×4时，图像的中间位于屏幕宽度的50％处。对不起，如果我没有说清楚自己，我只是在努力让自己在这里做什么，所以不知道如何把我的话放在纸上。 – Josh
@Josh因此，您需要将每行图片放入父div，然后添加{margin-left：auto;保证金右：自动;宽度：1010px}到父级。这是假设图像是500px。看到这个小提琴：https://jsfiddle.net/7rtb084r/4/ – DM98
谢谢，是的，这让我到我想要的地方。如果我把这两个小提琴结合起来，它似乎不起作用。他们将正确执行彼此独立，但是当他们合并时，他们不会。任何提示如何将它们结合起来将不胜感激，所以提前谢谢！ – Josh
所以只需将父DIV这2个图像与一些最大宽度和中间父DIV。 –
你可以发布你的代码吗？ – Tommy
当然，现在上传它。 – Josh