高度固定的响应式图像网格（下方1和3）

Question

我有一个图像网格，其中显示一个图像，然后显示三个图像。 我正在努力使它尽可能地响应。 当屏幕宽度很小时，我的前两次尝试看起来不错。 您可以在顶部看到一个图像，然后在下面看到3个对齐的图像。 如果将屏幕放大，则第一张图像要么失真（比率），要么存在间隙（从左侧和右侧开始）。 请在页面底部查看下面的代码片段和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张图像之间的间隔（蓝色箭头）。

Answer 1

选项1：避免图像拉伸是属性覆盖

如果将这两行添加到上层img {} css，在第二个jsfiddle中，对我来说一切正常：

.f2 img {
  object-fit: cover;
  object-position: 0 50%;
}

object-fit的问题是，在较旧的浏览器版本上，它不受很好的支持（ https://caniuse.com/#search=object-fit ），因此，如果可以使用<div>标记代替<img>标记并将图像设置为divs background-image: ：，您可以使用background-size，例如background-size: cover; 而不是完全一样但可100％支持的object-fit 。

选项2：

要使上部img保持正方形但全角，只需从第一个.example-collection-grid类中删除“ display：flex”，然后仅添加该img width: 100%; ，在您的小提琴上进行了测试，并且可以正常工作。

片段：

 *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;background-color:#fff;font-family:Arial,sans-serif;color:#323b40;font-size:16px;line-height:1.4em}img{max-width:100%;vertical-align:middle;display:inline-block}.example-body{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:64px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;border-radius:6px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 6px 12px 0 rgba(0,0,0,.1)}.example-body.pink{background-color:#ec1561;color:#ec1561}.example-collection{min-height:560px;padding:40px 48px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;color:#fff}.example-collection-grid,.example-collection-grid-first{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;margin-right:-12px;margin-left:-12px;-webkit-box-orient:horizontal;-webkit-box-direction:normal}.example-collection-grid-first{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.example-collection-grid-first img{width:100%}.example-collection-grid{display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.example-collection-grid.nested{margin-top:-12px;margin-bottom:-12px}.example-collection-cell{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:12px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}@media (max-width:991px){.example-collection{min-height:480px;font-size:14px;line-height:1.5em}}@media (max-width:767px){body{font-size:14px;line-height:1.4em}.example-body{margin-bottom:32px}.example-collection{min-height:320px;padding:18px 24px;font-size:12px;line-height:16px}.example-collection-grid{margin-right:-8px;margin-left:-8px}.example-collection-grid.nested{margin-top:-8px;margin-bottom:-8px}.example-collection-cell{padding:8px}}@media (max-width:479px){.example-body{margin-bottom:16px;border-radius:4px}.example-collection{min-height:240px;padding:12px;font-size:8px}.example-collection-grid{margin-right:-4px;margin-left:-4px}.example-collection-grid.nested{margin:-4px}.example-collection-cell{padding:4px}} 

 <div class="example-body pink"> <div class="col-xs-10"> <div> Instagram </div> <div> 21/10/2018 - 31/10/2018 </div> <div class="example-collection"> <div class="example-collection-grid-first"> <div class="example-collection-cell"> <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"> </div> </div> <div class="example-collection-grid"> <div class="example-collection-cell"> <div class="example-collection-grid nested"> <div class="example-collection-cell _1of3"> <img src="https://scontent-sea1-1.cdninstagram.com/vp/4af2e08b533e4d61f8316743e16f31b3/5C5E719E/t51.2885-15/e35/s480x480/42756110_553225941790401_6762481182286684009_n.jpg?ig_cache_key=MTg5MjMxODcxMDg2NjY3MTQ2OA%3D%3D.2"> </div> <div class="example-collection-cell _1of3"> <img src="https://scontent-sea1-1.cdninstagram.com/vp/73a6d62a8839981de4eb4576a70ee364/5C5D459E/t51.2885-15/e35/c0.135.1080.1080/s480x480/43083237_636952050032613_3914252954595670906_n.jpg?ig_cache_key=MTg5MTY3MDA3NzQ5ODQ1NTI5OA%3D%3D.2.c"> </div> <div class="example-collection-cell _1of3"> <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> </div>