如何在 bootstrap4 中调整图像大小以满足左侧的高度

Question

I want to show the image in right side of the top using bootstrap4, but don't know how to resize the image height to meet the same height (keep ratio) as left part

code (want to remove 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>

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

Answer 1

I approached it a different way although this may require you to edit the height and width of your image a little.

First I removed the image from that Div and added a class bg-smile

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

I've also added mb-0 to remove the bottom margin from the 3rd text box so the image exactly lines up at the bottom.

Then added a few CSS instructions for the new class and to make the smile image a background of the Div and center it.

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