图像裁剪问题

Question

我有一个div将图像裁剪为600px高，这就是代码的样子：

 .post .cutoff {
    height:600px;
    overflow:hidden;
}

.post .cutoff img {
    max-width:100%;
}

它工作正常，但如果图像不是600px或更高，它下面的任何东西都会间隔直到600px满足。像这样：

看，有一个令人讨厌的空间......我该如何解决这个问题？

Answer 1

使用以下属性覆盖图像到元素

.post .cutoff{
    background:url(image.png) center center fixed;
    background-size:cover;
}

background-size:cover;会将图片拉伸到width＆amp;该元素的height。要获得一个不错的效果，你必须像我一样center/align形象

当您将放大以覆盖元素时，使用更小的图像将看起来像素化

Answer 2

我想这是因为你的功能调整了分区而不是图像。 你可以使用javascript来做到这一点！ 请指定什么是post和cutoff。这些是分区和图像的类名吗？ 如果是，那么它应该可以正常工作。

否则你可以使用这段javascript来完成工作。

  var x = document.getElementById("imageid").getAttribute("height");
    if (x<600 || x>600)
    {
     document.getElementById("imageid").setAttribute("height","600px");
    }

在增加高度之前，这将检查图像高度是低于还是高于600px。