Как рано обрезать страницу

Question

Так что я размещаю изображения на моей странице, а нижняя часть изображений неровная, поэтому нижняя часть страницы - неровный беспорядок

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

Обычно мы пытаемся просто соединить их друг с другом таким образом, чтобы получился идеальный квадрат, но страница должна быть ответственной, поэтому невозможно предсказать, насколько она велика.

Есть ли способ отрезать веб-страницу после того, как она достигнет определенного%

Answer 1

Я предполагаю, что у вас есть оба изображения рядом друг с другом. вам понадобится немного JS и CSS для правильного адаптивного поведения на всех устройствах. Например,

.imageBox {мин-высота: 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();
        });

Answer 2

Вы в основном хотите, чтобы содержимое отображалось до определенной длины.Свойство 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, чтобы узнать необходимую длину.