Quisiera saber como hacer para que la imagen principal de una página tenga un alto del 100% del navegador principalmente sin necesidad de aplicarle píxeles.
Lo logro hacer aplicandole los píxeles pero al momento de verlo desde otra pc o un monitor con resoluciones diferentes de pantalla este ya no se ve igual ya que este lo tenia predefinido para una resolucion específica.
Quiero lograr algo como esto Ver Aqui, que como se puede ver cuando se abre la pagina hay una imagen principal y si se ve desde otro dispositivo se sigue viendo lo mismo sin ninguna distorsión o que la imagen se vea cortada. Ojo, la pagina no es mia solo la pongo como ejemplo.
Mi codigo:
@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: 844px;
width: 100%;
}
<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>