Question

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

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

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

有没有办法在网页达到一定百分比后切断网页

Answer 1

您基本上希望内容仅显示到一定长度。 overflow属性最适合这些情况。我建议用div“包装”您的全部内容。例如：

在您的html

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

在您的CSSs

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

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

Answer 2

我假设您同时在两列中都包含两个图像。您只需很少的JS和CSS，即可在所有设备中正常响应。例如

.imageBox {min-height：300px;}

<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();
        });

如何早期剪裁页面

2 个答案: