缩放图像矩阵直到某个宽度然后包裹它们

Question

我想用HTML和CSS实现图像中显示的效果（该示例使用JavaScript）。

是否可以缩小图像，然后将它们包裹在一定宽度？

这是一个没有缩小https://codepen.io/anon/pen/dVOVaG

的基本包装的Codepen

.outerDiv {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 0rem;
  margin-left: 0rem;
}

.innerDiv {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.imageDiv {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
</div>

Answer 1

您可以这样做：

* {margin: 0; padding: 0; box-sizing: border-box}

.outerDiv {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}

.innerDiv {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
}

.imageDiv {
  margin-bottom: 10px;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

img {
  display: block;
  width: 460px;
  max-width: 100%;
}

@media (max-width: 1220px) {
  .innerDiv {
    padding: 0 10px;
  }
}

@media (max-width: 767px) {
  .innerDiv {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .innerDiv {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg" alt="">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg" alt="">
    </div>
  </div>
</div>

为了达到这样的目的，img需要足够宽，但这取决于容器的宽度。为了更好的演示，我将它设置为1200px宽。您提供的原始302px张图片不够广泛，因此460px和{{1}的最后一次“中断”我已将它们480px设为{1}} } 10px。根据您的需要随意调整一切。