c# - 长文字和图片排成一排，缩小图片

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 属性将其设置为 nowraphttps://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap