Responsive image grid (1 and 3 underneath) with fixed height

Question

I have a grid of images where I show one image and then 3 images underneath. I am trying to make it as responsive as I can. My first two attempts look fine when the screen width is fairly small. You can see an image at the top and then 3 aligned images underneath. If I make the screen big, the first image either gets distorted (ratio) or there is a gap (from the left and right side). Please see the snippets and jsfiddles below alongside my comments at the bottom of the page.

Snippet One

 /* 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> 

Snippet Two

 /*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

Possibly the best version

The best solution is to make the images maintain their ratio (square) and have 0 margin/padding from the sides (green arrows show that). Then, the space between the 3 images can be changed (blue arrows).

Answer 1

Option 1: Avoid image from stretching is the property cover

if you add this two lines to your upper img {} css, in your second jsfiddle, all looks fine to me:

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

problem with object-fit is that on older browser versions is not well supported ( https://caniuse.com/#search=object-fit ) so if you can use <div> tags instead of <img> tags and set images as divs' background-image: , you can use background-size like background-size: cover; instead of object-fit which does the exact same thing but is 100% supported.

Option 2:

To keep the upper img square but full-width, simply delete "display: flex" from the first .example-collection-grid class, and add only to that img width: 100%; , tested on your fiddle and it works.

SNIPPET:

 *{-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>