如何调整图像大小以满足 bootstrap 4 左侧的高度

Question

我想使用 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

Answer 1

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

首先我从 Div 中删除了图像并添加了 class bg-smile

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

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

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

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

如何调整图像大小以满足 bootstrap 4 左侧的高度

how can I resize image to meet height in left in bootstrap4

css

bootstrap-4