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

【问题标题】：How to use background-postion to make responsive images如何使用背景位置制作响应式图像
【发布时间】：2015-02-14 10:03:24
【问题描述】：

我正在为我的自定义主题使用 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 解决方案。

请告诉我您还需要什么其他信息以提供帮助。

提前致谢。

【问题讨论】：

图像未按比例缩小并保持水平内联。见编辑。
有点不清楚你到底在问什么。我注意到您的 .wrapper 类占用了它的父元素的 95%，即 body？此外，您的li#menu-item-1688 a 中没有任何内容表明它能够响应宽度和高度的变化。
你的意思是
元素不随 .wrapper 缩放？您在
.

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