Обрезать изображение до размера div. Переполнение: скрытый не работает

Question

Я хочу создать галерею изображений, используя сетку Bootstrap. Вся галерея должна иметь 100% ширину. Я сделал ряд с двумя сетками. Каждый из них включает в себя одну картинку. Картинка из первой сетки решает вопрос о высоте. Изображение во второй сетке должно иметь ту же высоту, что и изображение в первой сетке, и обрезаться вправо и влево.

См. Код ниже.

Моя проблема в том, что вторая картинка больше чем div.

Я пробовал использовать overflow: hidden и position: absolute, у него правильная высота, но он не обрезан.

.container {
  width: 100%;
}

.image {
  height: 100%;
}

secondimage {
  overflow: hidden;
}

.heighthundred {
  height: 100%;
  position: absolute;
}

<div id="linknews" class="cointainer">
  <div class="row">
    <div class="col-sm-8">
      <div class="image">
        <div class="">
          <img src="./image1.jpg" class="img-fluid">
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="secondimage">
        <div class="image">
          <img src="./image2.jpg" class="heighthundred">
        </div>
      </div>
    </div>
  </div>

Answer 1

<div class="col-sm-4 padzero"> replace this from below line.

<div class="col-sm-4 padzero" style="overflow: hidden;">

или

Вставьте код CSS в свой CSS.

.col-sm-4.padzero{
overflow: hidden;
}

Answer 2

Установите изображение как background-image на div

Таким образом, ваш HTML становится: -

 <div class="image">
    <div style="background-image: url('./image2.jpg');">
    </div>
  </div>

и в вашем css

.image > div{
  background-size:cover;
  background-position: center;
}

и вам не понадобится второй класс изображения.

Answer 3

Вы должны добавить положение: относительное;на втором классе изображения.

secondimage{
    overflow: hidden;
    position: relative;
}