How can I ensure that regardless of the image's dimensions, it will always be centered within a div with a height of 500px?
It appears similar to the second green example.
<div class="container">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://via.placeholder.com/500x550" alt="">
</div>
<div class="col-8">
<h1>I am fix Div</h1>
</div>
<div class="col-4">
<img class="img-fluid" src="https://via.placeholder.com/500x750" alt="">
</div>
<div class="col-8">
<h1>I am fix Div</h1>
</div>
</div>
</div>
Bootstrap 4