Tenho esse problema. Vou ser bem direto. Imagens auto-explicativas.
Posso diminuir a fonte mas eu não sei a quantidade de conteúdo que estará no bloco. Então quero fazer um código funcional. Pesquisei algo sobre object-fit.
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
#page {
background: #1b6491;
color: #fff;
}
<section id="page">
<div class="container-fluid">
<div class="row">
<div class="col-6"><img class="img-fluid" src="https://picsum.photos/300/300" alt=""></div>
<div class="col-1"></div>
<div class="col-4">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto quam, dignissimos, totam recusandae repellendus iure cumque ab possimus esse eum nam architecto, dolorum consectetur ipsum laudantium distinctio. Maxime, dicta.</p>
</div>
<div class="col-1"></div>
</div>
</div>
</section>