0

我正在使用这个画廊网格布局

http://codepen.io/team/css-tricks/pen/pvamyK

html:

<section id="photos"></section>

CSS：

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

我需要图像来填充全屏 div，并且可以裁剪掉不会被屏幕覆盖的图像。现在的情况是，如果图像不适合屏幕，它会转到网格中的下一列，从而在每列的末尾留下大的空白区域。

我使用 25 张图像来填充 5 列网格，并且没有全屏 div，网格只会扩展 3 个屏幕。我只想要 1 个全屏 div，即使这意味着许多图像将不可见并且会被截断。

4

1 回答 1

0
  • 添加position: fixed;到容器（所有img的包装器），所以你的屏幕是固定的。
  • 我建议为移动视图（3~4）使用更少的列，否则您需要超过 25 个图像才能显示 1 个全屏而没有空白/空白。

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

$('#photos').append(allImages);
#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   position: fixed;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}

body {
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="letter">
  <section id="photos"></section>
</div>

于 2017-04-16T20:10:58.607 回答