Bootstrap 5图像大小

Question

我想创建一个类似Twitter的登录屏幕。www.twitter.com

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

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

我使用Bootstrap 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>

编辑：除了创建一个全高的图片，我看到推特有一个页脚，所以图片的组合&页脚是全高的，而不仅仅是图像。

Answer 1

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

下一步：您不需要img-fluid，但您需要具有完整width和height到100%的CSSobject-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上看到它的实际应用。