Длинный текст и фото в один ряд, уменьшите картинку

Question

Я использую Bootstrap 4 для себя, мне нужно решить две проблемы.

1. Уменьшить изображение, сохранить пропорции.
2. Когда я помещаю длинный текст (40 символов) справа от картинки - он перемещается под ним

<div class="container" style="margin-top:110px;"  >
    <div class="d-flex flex-wrap">
        <div style="float:left">
            <img class="img-fluid z-depth-2 rounded" src="data:image/jpeg;base64,@(Convert.ToBase64String(Model.Image))" />
        </div>
        <div style="float:left">
            <h1 style="margin-left:300px" class="">@Model.Name</h1>
            <h5 style="margin-left:40px" class="">@Model.About</h5>
        </div>
    </div>
</div>

Answer 1

<div class="container" style="margin-top:110px;"  >
<div class="d-flex flex-wrap">
    <div style="float:left">
        <img class="img-fluid z-depth-2 rounded" src="data:image/jpeg;base64,@(Convert.ToBase64String(Model.Image))" />
    </div>
    <div style="float:right">
        <h1 style="margin-left:300px" class="">@Model.Name</h1>
        <h5 style="margin-left:40px" class="">@Model.About</h5>
    </div>
</div>

попробуйте это

Возможное решение: использование свойства flex-wrap, задающего значение Nowrap https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap