html - 响应 不会缩小到包含图像的大小

Question

我以前从未遇到过这个问题，在网上进行了研究但没有找到任何东西。我想我在这里遗漏了一些基本的东西......

这是我的 HTML:

<ul>
    <li>
        <figure>
            <img src="xyz1">
        </figure>
    </li>
        <figure>
            <img src="xyz2">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz3">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz4">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz5">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz6">
        </figure>
    </li>
</ul>

这是我的 CSS:

img {
    max-width:100%;
    height:auto;
}
ul{
    width:100%;
    margin:0;
    padding:0;
}
ul li{
    width:33.3%;
    float:left;
    list-style:none;
}
ul, li, figure{
    margin:0; padding:0;
}

我的图片都是一样大小的。问题是我的 img 都缩小到 344px 的高度，而我的 li 标签缩小到 348px，这导致每个 li 标签底部有 4px 的间隙。

我在这里错过了什么？

在此先感谢您的帮助!

Answer 1

问题是您的 li 的高度大于宽度。您的实际图像的宽度和高度为 195 x 195 (px)。因为您将 img 高度设置为自动，所以它使用可用的相同宽度。

示例:如果您的 li 宽度为 200，高度为 210，则 img 宽度将为 200，高度为 200(自动)留下 10 个像素的间隙。

您的解决方案是将 li 的高度设置为宽度的高度。如果您只是简单地使用以像素为单位的定义宽度，我们会在高度上设置相同的数量，但是因为您使用的是百分比，我们可以在加载时使用 jQuery 执行此操作:

编辑:真正的解决方案是将 line-height 设置为 0。代码已更新。

ul {
  width: 100%;
  padding: 0;
}

ul li{
  width: 33.3%;
  float: left;
  list-style: none;
  line-height: 0;
}

img {
  max-width: 100%;
  height: auto;
}

figure, ul, li {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
</ul>

顺便说一句，为了确保您的帖子具有以下 CSS:

ul, li, figure {
    margin:0: padding:0;
}

注意 margin:0: 末尾有一个冒号而不是分号。确保将 CSS 放在不同的行中以避免此类错误。