如何通过W3.CSS实现图片全屏显示且无垂直、水平滚动条？

要解决垂直滚动条残留的问题，需要清除页面默认边距并确保图片与容器完全贴合视口，以下是修改后的代码：

<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 class="w3-full-height w3-margin-0 w3-padding-0">
          <div class="w3-display-container w3-full-height w3-black w3-center">
               <img class="w3-image w3-full-width w3-full-height" 
                    src="/static/Small World.jpg?param={{range(1, 51) | random }}"
                    style="object-fit: cover;">
          </div>
     </body>
</html>

关键修改说明： #

• 给body添加w3-full-height w3-margin-0 w3-padding-0：清除浏览器默认的边距和内边距，同时让body占满整个视口高度
• 外层容器改用w3-display-container w3-full-height：确保容器完全覆盖视口，w3-display-container便于内部元素适配容器尺寸
• 图片添加w3-full-width w3-full-height并设置object-fit: cover：让图片填充整个容器，同时保持原始比例，避免拉伸变形或内容溢出
• 移除多余的w3-image嵌套div：直接给img添加类即可，减少不必要的层级

内容的提问来源于stack exchange，提问作者Werner Venter