0

我正在尝试构建一个具有固定高度的响应式图像网格（标题可能会在我使其响应后添加）。因此，总网格将具有固定的高度，我希望在此（宽度将根据屏幕尺寸变化）图像适合而不溢出。这意味着图像的大小和边距/填充将是可变的。

我没有固定高度的第一次尝试是在这里：

  .wrapper {
    max-width: 1200px;
    margin: auto;
  }
    
  img {
    background-size: cover;
    max-height: 140px;
    max-width: 140px;
  }
  
  /*Basic Grid Styles*/
  .Grid {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
  }
  
  .u-textCenter {
    text-align: center;
  }
  
  .Grid-cell {
    flex: 1;
  }
  
  .Demo {
    padding: .8em .5em 0;
    margin-bottom: .8em;
    /*border: 1px solid #124;*/
  }
  
  /* With gutters*/
  .Grid--gutters {
    margin-left: -1em;
  }
  
  .Grid--gutters .Grid-cell {
    padding-left: 1em;
  }
  
  .Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
    margin-right: 1em;
  }
  
  /* Justify per row*/
  .Grid--right {
    justify-content: flex-end;
  }
  
  .Grid--center {
    justify-content: center;
  }
  
  /* Alignment per row */
  .Grid--top {
    align-items: flex-start;
  }
  
  .Grid--bottom {
    align-items: flex-end;
  }
  
  .Grid--center {
    align-items: center;
  }
  
  /* Alignment per cell */
  .Grid-cell--top {
    align-self: flex-start;
  }
  
  .Grid-cell--bottom {
    align-self: flex-end;
  }
  
  .Grid-cell--center {
    align-self: center;
  }
  
  .navigation {
    list-style: none;
    /*background: deepskyblue;*/
    background: rgba(102, 51, 255, 0.1);
    margin: 0 0 1em;
    border: 1px solid #33cccc;
    border-radius: 3px;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: flex-end;
  }
  
  .navigation a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: #333;
  }
  
  .navigation a:hover {
    background: rgba(64, 0, 255, 0.1);
    border-radius: 3px;
  }
  
  .navigation:hover {
    background: rgba(102, 51, 255, 0.25);
  }
  
  @media all and (max-width: 800px) {
    .navigation {
      justify-content: space-around;
    }
  }
  
  @media all and (max-width: 600px) {
    .navigation {
      -webkit-flex-flow: column wrap;
      flex-flow: column wrap;
      padding: 0;
    }
    .navigation a {
      text-align: center;
      padding: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .navigation li:last-of-type a {
      border-bottom: none;
    }
  }
  
  /*===========================================*/
  /* Base classes for all media - Mobile first */
  .Grid--cols-2 > .Grid-cell {
    flex: 0 0 100%;
  }
  
  .Grid--cols-3 > .Grid-cell {
    flex: 0 0 100%;
  }
  
  .Grid--cols-4 > .Grid-cell {
    flex: 0 0 100%;
  }
  
  .Grid--cols-6 > .Grid-cell {
    flex: 0 0 calc(50% - 1em);
  }
  
  .Grid--cols-12 > .Grid-cell {
    flex: 0 0 calc(33.3333% - 1em);
  }
  
  .Grid--holly-grail .aside, .Grid--holly-grail .main {
    flex: 1 100%;
  }
  
  /* One of -- columns*/
  .Grid--1of2 > .Grid-cell,
  .Grid--1of4 > .Grid-cell:first-of-type,
  .Grid--1of3 > .Grid-cell:first-of-type {
    flex: 0 0 100%;
  }
  
  .Grid--1of6 > .Grid-cell:first-of-type {
    flex: 0 0 50%;
  }
  
  .Grid--fit > .Grid-cell {
    flex: 1;
  }
  
  .Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  
  /* Tablet (medium) screens */
  @media (min-width: 30em) {
    .Grid--cols-4 > .Grid-cell {
      flex: 0 0 calc(50% - 1em);
    }
    .Grid--cols-6 > .Grid-cell {
      flex: 0 0 calc(33.3333% - 1em);
    }
    .Grid--cols-12 > .Grid-cell {
      flex: 0 0 calc(16.6666% - 1em);
    }
    .Grid--holly-grail .aside {
      flex: 1 calc(25% - 1em);
    }
    .Grid--1of2 > .Grid-cell {
      flex: 0 0 50%;
    }
    .Grid--1of6 > .Grid-cell:first-of-type {
      flex: 0 0 30%;
    }
    .Grid--1of4 > .Grid-cell:first-of-type {
      flex: 0 0 50%;
    }
    .Grid--1of3 > .Grid-cell:first-of-type {
      flex: 0 0 100%;
    }
  }
  
  /* Large screens */
  @media (min-width: 48em) {
    .Grid--cols-2 > .Grid-cell,
    .Grid--cols-3 > .Grid-cell,
    .Grid--cols-4 > .Grid-cell,
    .Grid--cols-6 > .Grid-cell,
    .Grid--cols-12 > .Grid-cell {
      flex: 1;
    }
    .Grid--holly-grail .main {
      flex: 2;
    }
    .Grid--holly-grail .aside {
      flex: 1;
    }
    .Grid--holly-grail .aside-1 {
      order: 1;
    }
    .Grid--holly-grail .main {
      order: 2;
    }
    .Grid--holly-grail .aside-2 {
      order: 3;
    }
    .Grid--1of2 > .Grid-cell {
      flex: 0 0 50%;
    }
    .Grid--1of6 > .Grid-cell:first-of-type {
      flex: 0 0 16.6666%;
    }
    .Grid--1of4 > .Grid-cell:first-of-type {
      flex: 0 0 25%;
    }
    .Grid--1of3 > .Grid-cell:first-of-type {
      flex: 0 0 30%;
    }
    .Grid--gutters.Grid--nested .Grid-cell:first-of-type .Demo {
      margin-right: 0;
    }
  }
  
<div class="Grid Grid--gutters Grid--cols-6 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
  </div>
  <div class="Grid Grid--gutters Grid--cols-6 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
  </div>

和这个：

var w = window.innerWidth;
var h = window.innerHeight;

console.log(w);

//if count > 10 then new_w = w/10
.flex-c:after {
    content: '';
    display: table;
    clear: both;
}
.flex-i {
    height: 100px;
    width: 100px;
    background-color: gray;
    margin: 0 10px 10px 0;
    float: left;
}

.flex-i img{height: 100%;width:100%;object-fit: cover;}
<div class="wrap">
    <div class="flex-c">
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
    </div>
</div>

理想情况下，我需要一个具有特定高度（例如 250 像素）的网格，并且所有图像都在该高度内响应。这意味着填充/边距不会使它看起来很难看（列可以是 X 数）并且图像大小将是可变的。如果需要，也欢迎使用 Javascript。在这种情况下，我想在 CSS 中是否有办法。

所以，我最后的尝试是有一个砖石画廊，因为图像大小可能会有所不同：

#container {
    width: 100%;
    max-height: 200px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:8;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:8;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 8;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
    height: 200px;
    background-color: #d77575;
}

.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

img {
    height: 70px;
    width:70px
    background-color: #d77575;
}
<div id="container" class="cols">
    <div class="box one"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

而且我猜我必须关注css的列部分和图像大小并使用JS动态更改它们？

4

2 回答 2

3 
.flex-i img{height: 100%;width:100%;object-fit: cover;}

这将使图像响应将覆盖父级而不改变图像的纵横比。

于 2019-09-10T11:19:48.110 回答
-1

您需要使用 100% 宽度的自动高度，如下所示：

img.myimageclass{
  width: 100%;
  height: auto;
}

如果要将响应式图像限制为最大尺寸，请使用 max-width ，例如：

img.myimageclass{
      width: 100%;
      max-width: 400px;
      height: auto;
}
于 2019-09-10T11:23:32.300 回答