Question

当我有风景图像和肖像时如何删除空白？我知道图像不是向上移动并填充该空白，而是看起来不会对齐，但是没关系。

我还要根据浏览器窗口的比例调整图像大小。

HTML：

<?php
$dir = "img/";
$img = glob($dir . "*.jpg");

foreach ($img as $image) {
  echo "<img src='$image' class='imageCont'/>";
}
?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Photography</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>

</body>

</html>

CSS：

.imageCont {
  max-width: 200px;
  margin: 1px;
  transition: all 0.2s linear;
}

.imageCont:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 47px -2px #000000bf;
  transition: all 0.2s linear;
}

How it looks now

Answer 1

我找到了另一种方式

<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Photography</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>

    <section class="imageCont">
        <?php foreach ($img as $image) {echo "<img src='$image' class='imageCont' style='max-width:200px' />";}?>
    </section>

    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>

</body>

</html>

CSS

.imageCont img {
  overflow: hidden;
  transition: all 0.2s linear;
  margin: 1px;
}

.imageCont img:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 47px -2px #000000bf;
  transition: all 0.2s linear;
}

.landscape {
  max-width: 200px;
  width: 100%;
  height: auto;
}

.portrait {
  max-height: 133px;
  width: auto;
  height: 100%;
}

JS

$(window).on('load', function () {
  $('.imageCont img').each(function () {
    if ($(this).width() / $(this).height() >= 1) {
      $(this).addClass('landscape');
    } else {
      $(this).addClass('portrait');
    }
  });
});

Sample

Answer 2

所以取得了进步，我喜欢这种解决方案，但是我的问题是有时图像无法正确加载。就像它们在装载时堆叠在一起。

Sample error

当前代码如下：

HTML

<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Photography</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>

    <div class="grid">
        <div class="grid-sizer"></div>
        <?php foreach ($img as $image) {echo "<div class='grid-item'><img src='$image'></div>";}?>
    </div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
    <script src="https://unpkg.com/scrollreveal@4.0.5/dist/scrollreveal.js"></script>
    <script src="js/main.js"></script>

</body>

</html>

CSS

* {
  box-sizing: border-box;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
  transition: all 0.2s linear;
  padding: 5px 5px;
}

.grid-item img:hover {
  box-shadow: 0px 0px 40px -1px #000000bf;
  transition: all 0.2s linear;
}

JS

var $grid = $('.grid').masonry({
  percentPosition: true,
  columnWidth: '.grid-sizer',
  itemSelector: '.grid-item'
});

$grid.imagesLoaded().progress(function () {
  $grid.masonry();
});

ScrollReveal().reveal('.grid-item', {
  delay: 100,
});

Answer 3

要向上移动图像，您需要将它们对齐，并且需要使用

vertical-align:top;

要删除左/右空间，的确需要使用：

float:left;

或

margin-left:-3px;

请记住以下事实：如果各行的高度不同，则下一行的图像将与上一行的最大图像的底部对齐。

删除空白图片缩略图

3 个答案: