___ ___ As erkimt make the main image occupies 100% of width and height ______ qstntxt ___

I would like to know how to do so that the main image of a page has a high of 100% of the browser mainly without the need to apply pixels.

I can do it by applying the pixels but when viewing it from another pc or a monitor with different screen resolutions this one does not look the same since it had it pre-defined for a specific resolution.

I want to achieve something like this See Here , that As you can see when the page is opened there is a main image and if you see it from another device you can still see the same without any distortion or the image is cut off. Eye, the page is not mine I just put it as an example.

My code:

%pre% %pre%

    

______ azszpr174982 ___

CSS has a set of properties that do exactly what you're looking for

%code% causes the image to be applied to the entire container without showing the leftovers on the sides or up and down

%code% causes the origin of the image to be the vertical and horizontal center

%pre% %pre%

    

______ azszpr174984 ___

if you apply this code to a div:

%pre%

I should give you the height and width of the page at that time, also if you put a background image to the div you can put:

%pre%     

___

@import url('https://fonts.googleapis.com/css?family=Khand');
@import url('https://fonts.googleapis.com/css?family=Jura');
body {
	height: 100%;
  margin: 0px;
  padding: 0px;
}
html{
	height: 100%;
}
.contenedor{
	background: url(https://4.bp.blogspot.com/-R1WaUskJr_s/TrxJoBiea9I/AAAAAAAAAVU/JAUoAJTDNY8/s1600/fondo+pantalla.jpg) no-repeat center ;
  	height: 100%;
     background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

  <!--Content  E IMAGEN PRINCIAL-->
  <div class="contenedor d-flex justify-content-center">
  		<div class="row">
 			<div class="col-lg-12 d-flex justify-content-center align-items-center">
 				<h1>Titulo</h1>
 			</div>
  		</div>
  </div>