【发布时间】：2018-10-19 23:28:07
【问题描述】：
我有一个图像网格，我在其中显示一个图像，然后在下面显示 3 个图像。我正在努力让它尽可能地响应。当屏幕宽度相当小时，我的前两次尝试看起来不错。您可以在顶部看到一个图像，然后在下面看到 3 个对齐的图像。如果我把屏幕变大，第一张图像要么失真（比例），要么有间隙（从左侧和右侧）。请在页面底部的我的 cmets 旁边查看下面的 sn-ps 和 jsfiddles。
片段一
/* Latest compiled and minified CSS included as External Resource*/
.container{
max-height:200px!important;
}
.row{
padding-bottom:10px;
}
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row imagetiles">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
</div>
<div class="row imagetiles">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4">
<img src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4">
<img src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-4">
<img src="https://scontent-sea1-1.cdninstagram.com/vp/f2630ab0809f8f1f942e76620914885e/5C885E3A/t51.2885-15/e35/c0.61.1080.1080/s480x480/44191803_684612728592256_2201772746335609632_n.jpg?ig_cache_key=MTg5MTYwNzQwNTMxODQyMTY0MA%3D%3D.2.c" class="img-responsive">
</div>
</div>
</div>片段二
/*scares away bad guys*/
* {padding:0;margin:0;}
#dashboard {
display:flex;
/*height: 1024px; as specified in your original pen.
width: 1024px;
*/
min-width:100%;
width: 100vmin;
min-height:100%;
min-height:98vmin; /* (-) offset by 2x AMOUNT*/
height: 100%;
height: 98vmin; /* (-) offset by 2X AMOUNT*/
background-color:purple;/*visual dev*/
}
/*These two rules govern offset needed for whichever construct you choose to use first. In this example, only the .row is active, but if you chose to build the structure using cols (items 1,4,5 in col a, etc.) then the second rule would handle the same offset. Offset is 1x AMOUNT*/
#dashboard >.row{ padding:1vmin 0; }
#dashboard>.col { padding:0 1vmin; }
.row, .col{display:flex;}
.row{
flex-direction: row;
background-color:black;
}
.col{
flex-direction:column;
background-color:green;
}
.f1{flex:1;}
.f2{flex:2;}
.child{
display: flex;
flex:1;
margin: 3px; /* <--- AMOUNT*/
width:auto;
height: 100%;
/*CONTENT: TEXT*/
font-weight: bold;
font-size: 2em;
text-align: center;
color: white;
background-color: grey;
/*FOR DISPLAYING CONTENT CENTERED*/
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
/*UNCOMMENT THIS TO BEAUTIFY COLORS*/
body,#activecontainer,#dashboard,.row,.col{
/* background-color:#293C4A; */
}
img{
max-width: 100%;
max-height:300px;
}
#dashboard{
max-height:300px;
}<div id="dashboard" class="col">
<div class="row f2">
<div class="col f2">
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
</div>
</div>
</div>
<div class="row f1">
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
<div class="child"><img src="https://scontent-sea1-1.cdninstagram.com/vp/c67d489394820ab5cf40af652a62e63c/5C5F6209/t51.2885-15/e35/c135.0.810.810/s480x480/43064777_242628609743355_5025062255919095941_n.jpg?ig_cache_key=MTg5MTU2Nzg3NzIzMzE5ODA3OA%3D%3D.2.c"></div>
</div>Jsfiddle
最好的解决方案是使图像保持它们的比例（正方形）并且从侧面具有 0 边距/填充（绿色箭头表示）。然后，可以更改 3 个图像之间的空间（蓝色箭头）。
【问题讨论】：
-
可以通过多种方式做到这一点，首先让我知道您是否可以使用图片网址作为背景图片： url('yourimage');或者您严格要求它们是 使用 html ？
-
@notsure 图片 url 将被动态加载。这可以使用 HTML 或 CSS 中的 JS 来完成。由你决定。
-
请在下面查看我的答案，我认为选项 2 是您正在寻找的。span>
标签： html css flexbox bootstrap-4