How do I make a image scale/center using bootstrap? - html

Question

As you can see in the code below, when I resize window size, the image doesn't scale with it. I don't want to make the image distort when I resize the window. I want to make it so the image center is always in the middle of the window. Like on the phone I don't need to see the blue and red parts of the image just the center logo in middle and according to so with window resize until its full screen with full hero image in view. How do I do this? I can't really find any documentation with bootstrap.
input{
border: none;
border-bottom: 2px solid white;
}
::placeholder {
color: white
}
input[type=text] {
width: 36%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
background-color: transparent;
color: white !important;
}
input[type=text]:focus {
width: 50%;
background-color: transparent;
color: white !important;
}
.bg-primary {
background-color: #000000 !important;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-nav .open .dropdown-menu {
color: white
}
.navbar {
background-color: #000000;
}
.navbar .navbar-brand {
color: #ffffff;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ededed;
}
.navbar .navbar-text {
color: #ffffff;
}
.navbar .navbar-text a {
color: #ededed;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ededed;
}
.navbar .navbar-nav .nav-link {
color: #ffffff;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ededed;
}
.navbar .navbar-nav .dropdown-menu {
background-color: #000000;
border-color: #000000;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
border-top-color: #000000;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ededed;
background-color: #000000;
}
.navbar .navbar-toggle {
border-color: #000000;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
background-color: #000000;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #ffffff;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ffffff;
}
.navbar .navbar-link {
color: #ffffff;
}
.navbar .navbar-link:hover {
color: #ededed;
}
#media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
#media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
#media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
#media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ededed;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ededed;
background-color: #000000;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>(Insert Name) Reviews)</title>
<link rel="icon" type="image/png" sizes="100x100" href="https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png">
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html"> <img alt="logo" src="https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png" width="30" height="30"></a>
<input class="mr-auto" type="text" name="search" placeholder="Search...">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#collapse"
aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<img class="img-responsive" alt="background" src="https://i.imgur.com/I47YLUI.jpg" style="width:1536px;height:600px;">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>

Answer 1

You can use img-fluid class on image tag that will scale the image as per devices and remove custom CSS on image
bootstrap - responsive-images