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>
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
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,
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" :
See w3.css images and Responsive images for more examples.