Resolution image size in Mobile CSS - Increase height

Question

Resolution image size in Mobile CSS - Increase height

Navigation

#1 by (0 votes)

-1

To trying to increase the image of a div, but not to success. here's the code, am I missing something?

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

height:80%;
display:block;
}


    }

Any information only enters the site informed below and verify the error site: link

html5 css

asked by anonymous 19.04.2018 / 01:58

1 answer

500 Internal Server Error - Hosting UOL Host Xamarin ObservableCollection

score 0 · Accepted Answer

Vitor is putting the height in the wrong place.

The correct would be to put straight into the image. Only it will get "deformed" type stretched because you will only increase the height and not the width. Then you have to see how to handle it. Or you can use the style object-fit:cover (this style causes the image to 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 height 80% will not work because the element it is in has no height. So if Father does not have height you can not put height in% in Son, because he does not have a reference value, type like: would be 80% of what height if no one has height? Could you understand?

In this case I used height in VH which means viewport height

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