我目前是新的bootstrap5和我有空白的问题，在我的左侧时，它在全屏它的所有罚款，但当我测试响应性的空白图像从来没有离开。
我已经尝试了溢出和设置高度和宽度，但它仍然不占用它。帮助是非常感谢，因为我是新的Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="supertest.css">
</head>
<body>
<div class="container-fluid g-0 m-0 p-0 ">
<div class="row g-0">
<div class="col-8 g-0 m-0 p-0">
<img src="backgroundleft.jpg" alt="leftbg" class="img-fluid h-100 w-100">
</div>
<div class="col-4 overflow-hidden d-flex flex-column">
<div class="text-center pt-5 mb-2">
<img src="PUPLogo.png" alt="" class="w-25">
</div>
<h1 class="text-center">Reg<span>iTech</span></h1>
<h2 class="px-5">Login</h2>
<form>
<div class="form-group px-5 mb-3">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group px-5">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="d-flex justify-content-center mt-3">
<button type="submit" class="btn w-50 ">Submit</button>
</div>
</form>
<div class="mt-3 text-center">
don't have an account yet ?
</div>
<div class="row text-center mt-auto">
<div class="copyright">
Copyright@2022 | RegiTech | Developed DICT 3-1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
1条答案
按热度按时间ql3eal8s1#
一种解决方案是将图像作为元素移除，并通过CSS将其添加为背景图像，以设置容器本身的样式。然后，使用
object-fit: cover;的一些纵横比魔术，您应该能够设置一个响应的背景图像缩放。示例如下：https://jsfiddle.net/fatchild/r70gLwu3/53/
这个想法是你希望容器永远不显示白色，所以你设置该容器的背景图像的图像，并确保图像是100 viewport宽度和高度。这可能会导致图像扭曲，如果它被强制为容器的高度和宽度。要解决这个问题，对象适合声明将确保图像的最适当部分被显示而不使宽高比失真或导致白色。
1.删除img元素
1.向容器元素
id="bg-img"添加新ID1.为id属性设置一些新声明
请记住本地资源不会在其他人的机器上呈现。所以当发布一个例子时，确保从互联网上链接一个随机的图像，因为当其他人试图运行你的代码时，它会呈现在他们的本地机器上。