我来帮你搞定这个横幅的两个核心问题，咱们直接上修改方案和解释：

1. 让Logo与公司地址高度一致并正常缩放 #

你遇到的图片高度过高、缩放异常的问题，主要是没给图片设置合适的尺寸约束，也没做垂直对齐。可以通过自定义CSS来解决：

首先，给Logo图片添加一个自定义类（比如.brand-logo），然后设置以下样式：

.brand-logo {
    max-height: 70px; /* 这个值可以根据你的地址文本高度调整 */
    width: auto; /* 保持图片宽高比，避免拉伸变形 */
    vertical-align: middle; /* 让图片和文本垂直居中对齐 */
}

然后在HTML里给你的img标签加上这个类：

<img src="你的Logo地址" class="brand-logo" alt="Logo">

这样设置后，图片会自动按比例缩放，最大高度不会超过你设定的值，同时和旁边的地址文本保持垂直居中，完美对齐。

2. 调整小屏幕下的列换行顺序 #

要实现小屏幕上「Logo+公司地址 → 联系人1 → 联系人2」的换行效果，需要调整Bootstrap的列类：

假设你原来的大屏幕布局是用col-md-*划分的，那我们给每个列加上针对小屏幕（xs）的列类：

<div class="row">
    <!-- Logo列：小屏幕占3份，大屏幕占2份 -->
    <div class="col-xs-3 col-md-2">
        <img src="你的Logo地址" class="brand-logo" alt="Logo">
    </div>
    <!-- 公司地址列：小屏幕占9份，大屏幕占4份 -->
    <div class="col-xs-9 col-md-4">
        这里是公司地址文本
    </div>
    <!-- 联系人1列：小屏幕占整行，大屏幕占3份 -->
    <div class="col-xs-12 col-md-3">
        联系人1信息
    </div>
    <!-- 联系人2列：小屏幕占整行，大屏幕占3份 -->
    <div class="col-xs-12 col-md-3">
        联系人2信息
    </div>
</div>

为什么这样设置？ #

• col-xs-3 + col-xs-9：在最小屏幕（xs）下，Logo和地址会在同一行显示，刚好占满12列的宽度
• col-xs-12：联系人1和联系人2在小屏幕下各自占满整行，自然换行到下一行
• 大屏幕下的col-md-*保持你原来的布局宽度比例

完整的修改示例 #

把这些调整整合起来，你的横幅代码大概是这样的：

<div class="container">
    <div class="row">
        <div class="col-xs-3 col-md-2">
            <img src="https://via.placeholder.com/200x100" class="brand-logo" alt="Company Logo">
        </div>
        <div class="col-xs-9 col-md-4">
            <p>XX公司地址：XX省XX市XX区XX路XX号</p>
        </div>
        <div class="col-xs-12 col-md-3">
            <p>联系人1：张三 | 138XXXXXXX</p>
        </div>
        <div class="col-xs-12 col-md-3">
            <p>联系人2：李四 | 139XXXXXXX</p>
        </div>
    </div>
</div>

<style>
.brand-logo {
    max-height: 70px;
    width: auto;
    vertical-align: middle;
}
/* 可选：给地址和联系人的文本加个行高，让垂直对齐更协调 */
.row p {
    line-height: 70px; /* 和Logo的max-height一致 */
    margin: 0;
}
</style>

这个可选的行高设置能让文本的行高和Logo高度匹配，进一步强化垂直对齐的效果，你可以根据实际情况调整数值。

内容的提问来源于stack exchange，提问作者user363808