引导5图像大小

Question

我希望创建一个像Twitter一样的登录屏幕。www.twitter.com

在屏幕的左边，我希望在右边有一个全尺寸的图像和一个表单。

我希望图像是右对齐的，这样如果屏幕太窄，左手边就会被裁剪。

我使用的引导带5，我的形象是完整的高度，但它已经失去了它的比例。

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

编辑:除了创建一个图像的高度，我看到Twitter有一个页脚，所以图像和页脚的组合是完全高度，而不仅仅是图像。

Answer 1

您不能使用vh-100，因为它将迫使height到100vh，您的图像将失去其比例。

下一步:您不需要img-fluid，但是您需要具有完整width和height to 100%的CSS object-fit: cover;。(或者根据您的需要更改宽度。)object-fit: cover;将使您的图像伸展取决于大小(宽度，高度)，而不丢失比例。在W3School上阅读更多关于这一点的信息。

但是，我在Bootstrap中找不到任何作为object-fit: cover;的类。因此，您需要在您自己的CSS文件中手动编写它。

我在那里添加了类名my-brand-image和自定义CSS。

完整的HTML和CSS将是：

​

.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>

​

在JSFiddle上看到它的作用。