如何让图片响应纯css？

Question

我有一个Wordpress菜单，我已经制作了标签的背景图像。我试图让图像在.wrapper缩小时缩小，并将它们保持在水平行中，并避免使用引导程序时使用javascript和/或媒体查询或navwalker类。

这是全尺寸菜单的样子：

​

​

下面是我的.wrapper、9个菜单项中的一个菜单项以及nav类和徽标结构的代码。请注意，我正在尝试将相同的概念应用到徽标上。

我正在使用html5blank和Wordpress菜单。

<div class="nav" role="navigation">
    <?php html5blank_nav(); ?>
</div>

这是它呈现的9个<li>之一的html (我在css中设置了样式)。

<li id="menu-item-1688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1688"><a href="http://myUrl.com/blog/">Blog</a></li>


.wrapper {
    max-width:1280px;
    width:95%;
    margin:0 auto;
    position:relative;
}


  .logo {
        float:left;
        width:145px;
        height:157px;
    }

    .nav {
        float:left;
        padding-top:11px;
    }
    .nav ul {
        padding:0;
        margin:0;
    }
    .nav ul li {
        float:left;
        list-style-type:none;
        padding:0;
        margin:0;
    }

    li#menu-item-1688 a {
        display:block;
        background:url('img/ksl_news.png');
        background-repeat:no-repeat;
        width:110px;
        height:119px;
        color:transparent;
        margin-top:27px;
    }

Answer 1

您可以使用padding属性的一个特性来完成此操作:当指定为百分比时，padding /padding的值是根据元素的宽度计算的(这也适用于边距)。

最小示例：

a {
    background: url('http://i.stack.imgur.com/4kaLj.png');
    background-size: contain;
    display: block;
    padding-top: 12.6324%;
}

12.6324%来自图像的纵横比：height/width*100 = 310/2454*100 = 12.6324%。

display: block;会使元素的宽度达到容器的100%。总而言之，这解决了你的问题，只要你知道你的图像的纵横比，这样你就可以计算这些百分比，这是可行的。

Jsfiddle example.

Answer 2

所以这里有一个奇怪的方法-使用display: table来避免需要知道你将拥有的菜单项的数量。它并不是非常完美-因为图像有时会有一个像素大小的偏差，但如果这对你有效，那么很好:)

HTML：

<div class="container">
    <nav class="nav">
        <ul>
            <li class="logo"><a href="/"><img src="//placehold.it/145x157" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
            <li><a href="/"><img src="//placehold.it/110x119" /></a></li>
        </ul>

    </nav>
</div>

CSS：

.nav {
    display: table;
    width: 100%;
}

.nav ul {
    display: table-row;
}

.nav li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: table-cell;
    vertical-align: bottom;
}

.nav img {
    max-width: 100%;
    border: solid 1px #000;
}

JSFiddle Example.

但是，如果单元格大小的细微差别对您来说是一个问题(这是相当明显的)，但是您很高兴在css中对菜单中的菜单项数量有一个硬编码的要求，请尝试将相同的标记与以下CSS一起使用：

.nav ul {
    margin: 0px;
    padding: 0px;
    font-size: 0px;
}

.nav li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    vertical-align: bottom;
    max-width: 9%;
}

.nav li.logo {
    max-width: 11%;
}

.nav img {
    max-width: 100%;
    border: solid 1px #000;
}

Jsfiddle example.