Question

我有一个Wordpress菜单，我已经制作了标签背景图片。当.wrapper按比例缩小并将它们保持在水平行并避免使用javascript和/或媒体查询或navwalker类时，我试图让图像缩小，因为我使用了bootstrap。

菜单看起来像是满刻度的：

enter image description here

以下是我.wrapper的代码以及9个菜单项中的一个以及导航类和徽标结构。请注意我试图将相同的概念应用于徽标。

我正在使用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-top / padding-bottom的值是根据元素的宽度计算的（这也适用于边距）。

最小例子：

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中对菜单中的项目数量有硬编码要求，请尝试使用相同的标记改为使用followng 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.

如何使用纯CSS使图像响应？

2 个答案: