如何提前切断页面

Question

所以我在我的页面上托管图像，图像的底部是不均匀的，所以页面的底部是不均匀的混乱

https://i.imgur.com/zZ34QCV.png

通常id尝试以一种完美的正方形方式将它们组合在一起，但页面应该是负责任的，因此无法预测页面的大小。

有没有办法在网页达到某个％后切断网页

Answer 1

你基本上希望内容只显示一定的长度。 overflow属性最适合这些情况。我建议用div包装你的整个内容。例如：

在你的HTML中

<div class="wrapper-cutter">
    <!-- Your images/content here -->
</div>

在你的CSS

.wrapper-cutter {
    height: 300px; /*Pick it whatever you want*/
    overflow: hidden;
} 

编辑：我在这里假设您知道长度。从最近的评论来看，你有可能没有。如果不这样做，那么这种方法将无效。您将需要js来找出所需的长度。

Answer 2

我假设你有两个并排的图像。在所有设备中，你需要很少的JS和css才能获得正确的响应行为

.imageBox {最小高度：300像素;}

<div class="row">
  <div class="col-1">
    <div class="imageBox">
      <img src="abc.jpg" alt=""/>
    </div>
  </div>
  <div class="col-2">
    <div class="imageBox">
      <img src="abc.jpg" alt=""/>
    </div>
  </div>
</div>

JS：

$('.imageBox').children('img').each(function(n, img) {
            var $img = $(img);
            var $imgUrl = $(this).attr('src');
            $img.parent('.imageBox').css({
                'background': 'transparent url(' + $imgUrl + ') top center  no-repeat',
                'background-size': 'cover',
                '-webkit-background-size': 'cover',
                '-moz-background-size': 'cover',
                '-o-background-size': 'cover'
            });
            $img.hide();
        });