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

我有一个Wordpress菜单，我把标签做成了背景图片。当

.wrapper

缩小时，我试图缩小图像的比例，并将它们保持在水平行中，避免javascript和/或媒体查询或navwalker类，因为我正在使用引导

这是菜单的全尺寸显示：

以下是我的

.wrapper

代码，以及9个菜单项中的一个，以及导航类和徽标结构的代码。请注意，我正在尝试将相同的概念应用于徽标

我正在使用HTML5空白和Wordpress菜单

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

下面是它呈现的9个

之一的html（我正在css中设置样式）

.包装纸{
最大宽度：1280px；
宽度：95%；
保证金：0自动；
位置：相对位置；
}
.标志{
浮动：左；
宽度：145px；
高度：157px；
}
.导航{
浮动：左；
填充顶部：11px；
}
美国海军{
填充：0；
保证金：0；
}
李国荣先生{
浮动：左；
列表样式类型：无；
填充：0；
保证金：0；
}
li#菜单项-1688 a{
显示：块；
背景：url（'img/ksl_news.png'）；
背景重复：无重复；
宽度：110px；
高度：119px；
颜色：透明；
利润上限：27px；
}

您可以使用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%

显示：块使元素占据其容器的100%宽度。总之，这解决了你的问题，只要你知道你的图像的纵横比，以便你可以计算这些百分比，这将工作

所以这里有一种奇怪的方法-使用
显示：table
，以避免需要知道您将拥有的菜单项的数量。它不是很完美——因为图像有时可能会缩小一个像素，但如果这对你有用，那就太好了：）

HTML:



但是，如果单元格大小的微小差异对您来说是一个问题（这是很明显的），但您很高兴在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;
}

使用百分比作为图像的尺寸。@user2684452您能发布一些
HTML5 blank\u nav（）
产生的实际HTML标记吗？如果您可以将其粘贴到jsfiddle或其他东西中，那么就更好了，这样我们就不需要投入太多精力来帮助您。我问这个问题的原因是，标记来自wordpress真的一点都不重要——问题是如何正确地表达您所追求的内容，因此如果您可以跳过不重要的内容，并将其归结为简单的html/css/javascript示例，您将更快地得到答案：）真的很酷。我知道你是怎么做到的，但在我的情况下不起作用。我试着填充顶部，填充底部，去掉背景重复。没有任何影响。可能与这些菜单项和包装在其他结构中有关？li#menu-item-1688 a{background:url（'img/ksl#u news.png'）；背景重复：不重复；宽度：110px；高度：119px；颜色：透明；页边空白顶部：27px；填充顶部：92.4369%；背景大小：包含；显示：block；}@user2684452是的-肯定可以。如果您将问题编辑为包含一个关于JSFIDLE或plunkr或其他内容的最小示例，我很乐意进一步提供帮助-如果没有完整的示例和所有相关的标记/样式，很难猜测问题的确切原因。话虽如此，但我目前的猜测是，它不起作用，因为您提供了一个宽度以及我示例中的代码。此技巧依赖于
显示：块
和
宽度：自动
-的使用，否则将不起作用。尝试在a标签的父项上设置所需的宽度，并在a标签上使用
width:auto
。尽管-在我再次阅读后，我现在意识到我完全误解了你的问题。我将很快为您发布一个新答案：）@user2684452新答案发布：）我将尝试这些样式，但不确定这在html结构方面是否有效，因为我使用的是Wordpress菜单。如果您有特殊要求，请将您的html结构作为问题的一部分发布。CSS不足以让我猜测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>

.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;
}

.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;
}