Question

我正在使用Wordpress原生菜单作为我的自定义主题。问题是，我使用的是背景图像而不是文本。话虽这么说：我的所有图像都是机智的，但现在我试图让图像缩小，以便在它们缩小的.wrapper容器时响应。

我的最新尝试涉及使用background-postion:属性和background-size:属性并使图像与其父元素一起缩放。在这种情况下.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本身。

如何使用背景位置来制作响应式图像

1 个答案: