Question

我正面临着css编码问题。我真的需要帮助解决这个问题。剪短故事，我有一个 div 的图像，这是我想要的滑动横幅 div 。但是，我想知道为什么在 div 中的图像下面会有一个填充，如果我将高度设置为auto（我将高度设置为auto，因为我想制作一个响应式布局）。无论我如何为图像设置0填充 div ，它都无法工作。我提供了一个链接来查看图像或查看实时网站。链接到附件http://www.ncc.my/resources/padding-issue.jpg或链接到网站http://www.ncc.my（此网站仍在进行中）。

我对div的css代码是：

#contentContainer .slides {width:1140px; height:auto float:left; background:#666;}
#contentContainer .slides img {width:100%; padding:0; margin:0; border:0;}

@media screen and (max-width: 850px)
{
#contentContainer .slides {width:100%;}
}

如果我将高度设置为我想要的指定高度，则布局非常完美。但是，当我再次将高度设置为 auto 时，肯定会出现问题，如附件中所示。解决这个问题的任何解决办法？非常感谢！

Answer 1

您需要在图片上添加display: block。所以你的CSS将是

#contentContainer .slides img {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block; /* Add this */
    border: 0;
}

Answer 2

也许尝试设置高度：100％而不是自动。这个答案更像是在黑暗中拍摄我不确定它是否会起作用。

删除填充底部的高度：自动

2 个答案: