css - 如何使用 background-position 制作响应式图片

Question

我正在为我的自定义主题使用 Wordpress native 菜单。问题是，我使用的是背景图片而不是文本。话虽这么说:我的所有图像都完好无损，但现在我正试图让图像在 .wrapper 容器缩小时响应缩小。

我最近的尝试涉及使用 background-postion: 属性和 background-size: 属性并让图像随父元素缩放。在本例中是 .wrapper。我的总体目标是让图像保持在 wrapper 宽度的水平线上，并在包装​​纸缩小时缩小到一定尺寸。

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

.nav ul li {
    float:left;
    max-width:100%;
    height:119px;
    margin:0;
    padding:0
}
/* nav elements */


li#menu-item-1688 a {
    background:url('img/ksl_news.png'); 
    max-width:100%;
    height:100%;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    display:block;
    padding:0;
    margin:0;

}

如果可能的话，我正在寻找纯 css 解决方案。

请让我知道您还需要什么其他信息来提供帮助。

提前致谢。

Answer 1

我的建议是使用简单的 jQuery 来检测窗口/浏览器大小的变化并向必要的元素添加类。

 var $window = $(window),
     $body = $('body');

 $(window).on('resize', function () {
    if ($window.width() < 800) {
       $body.addClass('medWin');
   }else{
    $body.removeClass('medWin')};
 });

然后你会风格:

body.medWin .menu li {
    // style here
}

您也可以将该类应用于菜单容器或 ul 本身。