CODEWITHSUNDEEP
cssbootstrap-4
Larry Cai
Larry Cai

Reputation: 59963

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

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

enter image description here

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

Upvotes: 1

Views: 39

Answers (1)

Cutey from Cute Code
Cutey from Cute Code

Reputation: 1144

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;
}

Upvotes: 1

Related Questions