I'm looking to set up an image gallery using the Bootstrap grid layout. The gallery should span 100% width and consist of two grids in a row, each containing one picture. I want the height of the second picture to match that of the first, with cropping on both sides.
Although I've attempted to use overflow: hidden and position: absolute, the second picture ends up being larger than the div container.
Below is the code snippet:
.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>