Mobile CSS image size resolution - Increase height

Question

I try to increase the image of a div, but it is not successful. here’s the code, I’m missing something ?

 @media (max-width: 768px){
 
 
  .row-fluid banner cheio{

height:80%;
display:block;
}


    }

Any information only enters the site informed below and check the error website : https://www.campifibras.com.br/

Answer 1

Vitor you are putting the height in the wrong place.

The correct would be to put straight into the image. Only that it will get "deformed" kind splashed pq vc will only increase the height and not the width. Then you have to see how to treat it. Or you can use the style object-fit:cover (this style makes the image behave more or less like a background-image with size:cover )

@media (max-width: 768px){
    .flexslider .slides img {
        height: 60vh;
        object-fit: cover;
    }
}

Another thing is that the height 80% will not work because the element in which he is inside has no height. So if the Father is not tall you cannot put height in % in the Son, because he has no reference value, like this: would it be 80% of what height if no one is tall? It seemed?

In that case I used the height in VH which means viewport height

OBS: If you prefer you can use the fixed size in PX as well. Or in @media itself change the image when the screen is smaller.