CODEWITHSUNDEEP
htmlcssimagebootstrap-5
Nico A.L
Nico A.L

Reputation: 35

How to make some image fit with the bootstrap columns with auto zoom image to fill the column

The image fit and fill the column with zoom

This is the picture when open in mobile, and I want to be like this

This is the result when I try to fit 100%

And this is my code :

<div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="xon-card">
            <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/9/6/960x500_3_.jpg" alt="">
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
          <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/m/e/mermaid--teaser-update-5.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

After that I want to make some button like that

I'm using bootstrap 5.

Upvotes: 0

Views: 1569

Answers (2)

Chinh Nguyen
Chinh Nguyen

Reputation: 1266

add style to img:

width: 100%;
height: 100%;
object-fit: cover;

Upvotes: 2

Amin Ghorbankhani
Amin Ghorbankhani

Reputation: 1

I guess you can handle it by flex-wrap. See the link below.

https://getbootstrap.com/docs/4.0/utilities/flex/#wrap

Upvotes: 0

Related Questions