I′m currently an aspiring frontend developer. I′ve been assigned to create the markup and style of the following image
Assignment
I′m currently using twitter bootstrap 5, however I can′t seem to make the right adjustement.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="container-fluid p-0 bg-wabe h-100"> <nav class="navbar navbar-expand-lg link-light mb-4 border-b"> <a class="navbar-brand m-4" href="#"> brand </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav-fill w-100"> <li class="nav-item"> <a class="nav-link active link-light border-r" aria-current="page" href="#">LUGARES</a> </li> <li class="nav-item"> <a class="nav-link link-light border-r" href="#">CATEGORIA</a> </li> <li class="nav-item"> <a class="nav-link link-light border-r" href="#">EVENTOS</a> </li> <li class="nav-item"> <a class="nav-link link-light border-r" href="#">CUPONES</a> </li> <li class="nav-item"> <a class="nav-link link-light" href="#">CUENTA</a> </li> </ul> </div> </nav> <div class="container-xxl"> <div class="row"> <div class="col-6 p-0"> <img src="https://images.unsplash.com/photo-1530863666585-c8996c9f729c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" class="img-fluid mb-2" alt="img1"> <img src="https://images.unsplash.com/photo-1530863666585-c8996c9f729c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" class="img-fluid" alt="img1"> </div> <div class="col-3 p-0 pl-1 m-0"> <img src="https://images.unsplash.com/photo-1561807367-a1ff826a51e6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80g" class="img-fluid" alt="img1"> </div> <div class="col-3 p-0 pl-1 m-0"> <img src="https://images.unsplash.com/photo-1561807367-a1ff826a51e6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="img-fluid" alt="img1"> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html>
No need with modern css.
You can just add this css:
img { height:100%; width:100%; object-fit:cover; object-position:center; }
It will work as if it were a background-image
background-image
1.4m articles
1.4m replys
5 comments
57.0k users
