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

Question

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

这是全尺寸菜单的样子:

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

我正在使用 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.