Question

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

请参见此处：http://kekor.hostzi.com/

开发工具截图：http://i.imgur.com/0TKkDDv.jpg

这是代码

<!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>

Answer 1

我的页面上没有任何边距。你指的是滚动条吗？

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

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

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

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

Answer 2

尝试清理样式语法并添加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>

IMG TAG的奇怪行为

2 个答案: