Bootstrap 5 Image sizing

Dercni 0
Viewed 34

I wish to create a login screen like Twitter. www.twitter.com

On the left of the screen I wish to have a full-size image and a form on the right.

I want the image to be right aligned so the left-hand side will be cropped if the screen is too narrow.

I am using Bootstrap 5 and my image is full height however it has lost its proportions.

  <div class="container vh-100">
    <div class="row vh-100">
      <div class="col-6">
        <img src="../assets/login.jpg" class="img-fluid float-end vh-100" alt="login">
      </div>
      <div class="col-6">
        <!-- Form goes here -->
      </div>
    </div>
    <div class="row">
      This is the footer
    </div>
  </div>

Edit: In addition to creating an image full height, I see Twitter has a footer so the combination of the image & footer are full height, not just the image.

twitter-bootstrap
1 Answers

You cannot use vh-100 because it will be force height to 100vh that your image will be lost its proportions.

Next: You don't need img-fluid but you need CSS object-fit: cover; with full width and height to 100%. (Or maybe change width to your need.) The object-fit: cover; will make your image stretch depend on size (width, height) without lost proportions. Read more about this on W3School.

However, I couldn't find any class from Bootstrap that work as object-fit: cover;. So, you need to manually write it in your own CSS file.
I added class name my-brand-image and custom CSS there.

Your full HTML and CSS will be:

.my-brand-image {
    object-position: center;
    object-fit: cover;
    height: 100%;
    width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container vh-100">
    <div class="row vh-100">
      <div class="col-6">
        <img src="https://dummyimage.com/800x800/000000/fff" class="img-fluid float-end my-brand-image" alt="login">
      </div>
      <div class="col-6">
        <!-- Form goes here -->
      </div>
    </div>
  </div>

See it in action on JSFiddle.

vee0
Related