如何在引导程序 4 中调整图像大小以满足左侧的高度答案

【问题标题】：how can I resize image to meet height in left in bootstrap4如何在引导程序 4 中调整图像大小以满足左侧的高度
【发布时间】：2022-01-09 07:43:58
【问题描述】：

我想使用 bootstrap4 在顶部右侧显示图像，但不知道如何调整图像高度以满足与左侧部分相同的高度（保持比例）

代码（想删除200px）

<div class="container">
  <div class="row">
    <div class="col-sm">
        <div class="alert alert-success">
           why cannot I still use table for this kind of tasks? why cannot I still use table for this kind of tasks?
        </div>
        <div class="alert alert-info">
           It is end of 2021
        </div>
        <div class="alert alert-info">
           Now I'd updated to div, this contents can have more text
        </div>
    </div>
    <div class="col-sm">
      <img width="200px" src="https://www.codeply.com/images/partner_creativetim.png" />
    </div>
  </div>
</div>

见https://www.codeply.com/p/flP5E5EpWk

【问题讨论】：

我对你想要做什么有点困惑......你介意再解释一下吗？
2021 年底的表格布局...这是你的第一个问题
@Kameron 当我调整网页大小时，左边部分（文本）可以换行，高度可以改变，我希望图像的高度可以自动调整，但需要保持比率现在改变了
是的。如果您使用行和列而不是表格，那么整个图像业务将非常容易。
@LarryCai 我同意 Alvaro 的说法，你必须使用表结构吗？如果没有，我可以用 div 的解决方案来回答。

标签： css bootstrap-4

【解决方案1】：

虽然这可能需要您稍微修改图像的高度和宽度，但我采用了不同的方法。

首先我从那个 Div 中删除了图像并添加了一个类 bg-smile

<div class="col-sm bg-smile">
  <!-- stays empty -->
</div>

我还添加了mb-0 以从第三个文本框中删除底部边距，以便图像在底部完全对齐。

然后为新类添加了一些 CSS 指令，并将微笑图像作为 Div 的背景并将其居中。

.bg-smile{
  background: url(https://www.codeply.com/images/partner_creativetim.png) 50% 50% no-repeat;
}

【讨论】：

谢谢，你能分享完整的代码吗？
@LarryCai 和我的朋友一样。像上面一样编辑 Div 并添加上面的 CSS。从本质上讲，它只是在该 Div 中创建背景，而不是在 HTML 页面上插入图像，因此您可以通过几种不同的方式进行操作。重点是在 Div 中制作背景。