I would like to know how to define the width of an image in a div without having to apply the pixels, but by percentage, since when you apply the pixels to increase / decrease the resolution would be the same length.
I have the following code, it contains bootstrap and what I want is to make the background image of the landscape be 100% of the container but by placing the width=100%; property in the image css, it does not take it.
*{
padding: 0px;
margin:0px;
}
.container{
position: relative;
width: 100%;
}
#persona{
z-index: 3
}
#contenido{
z-index: 1;
}
#paisaje{
position: absolute;
z-index: 2;
top: 310px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6" id="persona">
<img src="http://www.medicinahiperbarica.com.mx/wp-content/uploads/2015/11/persona-png.png" alt="">
</div>
<div class="col-6 bg-warning" id="contenido">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptatibus commodi fugit quod, animi alias architecto sapiente in aperiam facilis?</p>
</div>
<div class="col-12" id="paisaje">
<img src="https://softwarelibreenmivida.files.wordpress.com/2009/04/cielo-recortado.jpg" alt="">
</div>
</div>
</div>