How to make images occupy 100% of the browser

Asked

Viewed 167 times

1

I wanted to know how to have a 'Gallery' like this:(HTML and CSS)

http://logiciel-tek.com/demo/html/ether/ether-html/index.html (In the area OUR WOKS)

I wanted it to be the same regardless of the resolution or zoom (same as in the example), That the gallery was always occupying 100% of the screen. If possible put the code.

  • Hello, there are plugins for browers that let you dig through the code of the sites you’d like to know how they were made. I use firefox so I have Firebus. Just right-click on what you want to know and choose the option to see what kind of code you want. You can choose html, css, etc... This site uses Html5. They can even tell you how to do it but if you don’t have the basics you will create a site with gross errors. If I may say so, there’s nothing better than learning Html5 and css3 first before you venture.

1 answer

4

I put Css in the same file as html to make it easier to view You can do so with an image or in the background of Body for both the method is the same.

 <html>
  <head>
   <style>
      .Imagem{
                    width: 100%;
                    height : 100%;
                    position: absolute;
                    top: 0;
                    left: 0;        
             }
    </style>
    </head>
   <body>
     <img src = "download.jpg" class = "Imagem"></img>
   </body> 
 </html>
  • 2

    To not fail at all, set the minimum image width to (min-width:100%), so when the image is larger than the required display it will also be at the same ratio.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.