css - IMG TAG 的奇怪行为

Question

我的页面上有一个 IMG 元素。我将高度和宽度设置为 100%，因此 IMG 标签应该覆盖页面。但是我在图像末尾有一些空间

这是代码

<!DOCTYPE html>
<html>
<head>
 <title></title>
<style type="text/css">
    * {margin: 0; padding: 0;}
    .balotelli { width: 100%; height: 100% }
    body {background-color: red; height: 100%}
    html {height: 100%}

</style>
</head>
<body>
<img class="balotelli" src="balotelli.jpg" alt="ss" />
</body>
</html>

score 1 · Accepted Answer

我在您的页面上看不到任何边距。你指的是滚动条吗？

要删除滚动条，请在您的页面上使用此 CSS：

html, body {
    margin: 0 !important;
    overflow: hidden !important;
}

您还需要将图像设置为block元素：

.balotelli {
    width: 100%;
    height: 100%;
    display: block;
}

score 0 · Accepted Answer

尝试清理样式语法并添加 position: absolute;

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    .balotelli { width: 100%; height: 100%; position: absolute; }
     body {background-color: red; height: 100%;}
     html {height: 100%;}

     </style>
     </head>
     <body>
     <img class="balotelli" src="http://kekor.hostzi.com/balotelli.jpg" alt="ss" />
     </body>
     </html>

css - IMG TAG 的奇怪行为

2 回答 2

Related

Reference