Make two column responsive images of same size - html

Question

I have differently sized images, but want to make them look equal by width and height on the page. What I did:
HTML
<div class="col-lg-6">
<img src = "assets/img/101.jpg" alt="Null" />
</div>
CSS
#images img {
width: 100%;
padding-bottom: 4em;
position: center;
}
But they look like that:
They have different height.
How to make it equal?
Probably I need to crop them by height and center without changing the width. Is it possible?
Explanation from the comments
I have suggested that it will probably be nice to crop them, not resize. Center and crop to the size of smaller ones.

Answer 1

To gain more control over your images it's best to switch to background images. You can then use background-size: cover to fill out the div.
HTML
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
CSS
.image-holder {
background-size: cover;
background-position: center center;
height: 400px;
width: 100%;
}
If your images are just static assets it's better to include the image reference in css.

Answer 2

You can't set both height and width at the same time for an image- it will stretch them out. Have made it a 2-column flexbox along with col-lg-6 as per requirement.
See demo below:
.box {
border: 1px solid #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 50%;
min-width: 200px;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.col-lg-6.box {
padding: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
<div class="container">
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x100" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/75x75" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x50" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x150" alt="Null" />
</div>
</div>