Problem with image height

Question

The left Banner looks like this.

I tried to do a gambit, but it didn’t work out so well. -> .slide-1 img{min-height:480px;}

My HTML and CSS code:

.slide{width:100%; height:480px; margin-top:40px;}
.slide img{display:block;}
.slide-1{width:60%; float:left;}
.slide-2, .slide-3{width:40%; float:right;}

<div class="slide">
  <div class="slide-1">
    <img src="img/img-slide-1.jpg" alt="">
  </div><!--FECHAMENTO DE TAG-->
  <div class="slide-2">
    <img src="img/img-slide-2.jpg" alt="">
  </div><!--FECHAMENTO DE TAG-->
  <div class="slide-3">
    <img src="img/img-slide-3.jpg" alt="">
  </div><!--FECHAMENTO DE TAG-->
</div>

Answer 1

If you’re gonna be 100% tall width:100%, is height:100%, and the other sense, "self".

If you want it to be larger than the frame (adjusting by width or height, depending on which is smaller) you need to use:

background-size:cover

instead of width and height.

div {
  background:url(https://i.stack.imgur.com/BP1X8.png) center;
  background-size:cover;
  /* daqui pra baixo é só para o teste */
  margin:10px;
  float:left;
}

.h {
  width:200px;
  height:150px;
}

.v {
  width:150px;
  height:200px;
}

<div class="v"></div>
<div class="h"></div>

Answer 2

From what I understand, you put the images inside div's to organize, then you would have to position first the div'and then the images, see if this helps you:

.slide{
  width:100%; 
  height:480px; 
  margin-top:40px;
  background-color: red;
  font-size: 0;
}

.slide img{
  display:inline-block;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.slide-1{
  height:100%;
}

.slide-2, .slide-3{
  height:50%;
}

.coluna-1, .coluna-2{
  display: inline-block;
}

.coluna-1{
  height: 100%;
  width: 60%;
}

.coluna-2{
  width: 40%;
  height: 100%;
}

<div class="slide">
  <div class="coluna-1">
    <img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="" class="slide-1">
  </div>
  <div class="coluna-2">
    <img src="http://kingofwallpapers.com/imagem/imagem-005.jpg" alt="" class="slide-2">
        <img src="http://kingofwallpapers.com/imagem/imagem-005.jpg" alt="" class="slide-3">
  </div>     
</div>

note that the images are with the property obeject-fit:cover what would be the same effect of background-size: cover

Answer 3

Try this quick solution, although not very effective

.slide img {width:100%; height:100%;}