Адаптивная сетка изображений (1 и 3 снизу) с фиксированной высотой

Question

У меня есть сетка изображений, где я показываю одно изображение, а затем 3 изображения внизу.Я пытаюсь сделать это как можно более отзывчивым.Мои первые две попытки выглядят хорошо, когда ширина экрана довольно мала.Вы можете увидеть изображение вверху, а затем 3 выровненных изображения внизу.Если я увеличу экран, первое изображение будет искажено (соотношение) или будет пропасть (с левой и правой стороны).Пожалуйста, смотрите фрагменты и jsfiddles ниже вместе с моими комментариями внизу страницы.

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>

Фрагмент два

/*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: Избегать растягивания изображения - это свойство cover

, если вы добавите эти две строки к верхнему значению img {} css во втором jsfiddleвсе выглядит хорошо для меня:

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

проблема с object-fit в том, что в старых версиях браузера не поддерживается (https://caniuse.com/#search=object-fit), так что если вы можете использовать <div> тегов вместо <img> тегов и установки изображений в виде div'ов background-image:, вы можете использовать background-size подобно background-size: cover; вместо object-fit, который делает то же самое, но на 100%поддерживается.

Вариант 2:

Чтобы сохранить верхний квадрат img, но на всю ширину, просто удалите «display: flex» из первого .example-collection-grid класса идобавить только к этому img width: 100%;, проверено на скрипке, и оно работает.

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>