0

I am trying to get an image to fit the entire screen without showing vertical or horizontal scroll bars, the code below work horizontally but I still get a vertical scroll bar.

Preferred solution should be done in W3CSS

<html>    
     <title>wcs webservice</title> 
     
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

     <meta http-equiv='refresh' content='10'>

     <body>
          <div class="w3-container w3-black w3-center" style="width:100%;height:100%;">
               <div class = "w3-image">
                    <img class="w3-image" src="/static/Small World.jpg?param={{range(1, 51) | random }}" >
               </div>
          </div>

     </body>
</html>
Werner Venter
  • 47
  • 8

1 Answers1

1

If you want to clip the image, then you could use the CSS overflow property.

See CSS overflow-y property, for example.

This way, your code would be

<div class="w3-container w3-black w3-center" style="width:100%;height:100%;overflow-y:hidden">

Other CCS properties that you could find useful too, are object-fit and object-position.

In other hand, if you want scale the image then you could use combinations of the properties width, height, max-witdh and/or max-heigth with values of 100 % and/or auto according what you need.

For example,

img {
max-width: 100%;
height: auto}

the image will scale down if it has to, but never scale up to be larger than its original size. This setting is the same as "w3-image" :

.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}

See w3.css images and Responsive images for more examples.

L. Alejandro M.
  • 619
  • 6
  • 14