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

时间：2018-10-18 10:32:41

标签： html css flexbox bootstrap-4

我有一个图像网格，其中显示一个图像，然后显示三个图像。我正在努力使它尽可能地响应。当屏幕宽度很小时，我的前两次尝试看起来不错。您可以在顶部看到一个图像，然后在下面看到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>

摘要2 

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

最好的解决方案是使图像保持其比例（正方形），并且侧面的边距/填充为0（绿色箭头表示）。然后，可以更改3张图像之间的间隔（蓝色箭头）。

enter image description here

1 个答案:

答案 0 :(得分：0)

选项1： cover

属性避免图像拉伸

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

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

对象适应性的问题是在旧版浏览器上没有很好的支持（https://caniuse.com/#search=object-fit） 因此，如果您可以使用<div>标签代替<img>标签并将图像设置为div的background-image:，则可以使用{strong> background-size （背景尺寸），例如background-size: cover;而不是object-fit，它的功能完全相同，但是100％支持。

选项2：

要保持img的上部正方形但全角，只需从第一个.example-collection-grid类中删除“ display：flex”，然后仅将其添加到经过测试的img width: 100%;中就可以了

enter image description here

片段： 

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

相关问题
最新问题