html - 缩放图像矩阵直到一定宽度然后将它们包裹起来

Question

我想只用 HTML 和 CSS 实现图片中显示的效果(示例使用 JavaScript)。

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

这是一个没有按比例缩小的基本包装的 Codepen https://codepen.io/anon/pen/dVOVaG

.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 因为最后一个 “break” 在 480px 和 10px column-gap。随意根据您的需要调整一切。