当没有足够的宽度时，通过CSS自动减小背景图像集的大小

我网站上的标题包含一个图像集作为背景，HTML输出如下-

<div id="header-container">
    <div class="inner">
        <h1>
            <a title="Go home..." href="http://home_url">Blog title</a>
        </h1>
    </div>
</div>

---

@媒体查询可能有助于：

#header-container .inner h1{
    background:                 transparent url(res/title-white.png) no-repeat center left;
    background-size:            432px auto;
    height:                     85px;
    margin:                     0;
    width:                      432px;
}

@media (max-width: 432px){
    #header-container .inner h1{
        background-size: cover;
    }
}

---

在

我在船上

您应该使用

背景尺寸：包含

，而不是

背景尺寸：封面

，与

最小/最大宽度

结合使用

像这样改变你的CSS

#header-container .inner h1{
    background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
    background-size: contain;
    height: 85px;
    margin: 0;
    max-width: 432px;
}

示例代码段

#标题容器{
背景色：#053525；
边框底部：1px实心#4DC386；
填充：10px 20px；
位置：相对位置；
宽度：100%；
框大小：边框框；
}
#标题容器。内部{
保证金：0自动；
最大宽度：1000px；
位置：相对位置；
}
#标题容器。内部h1{
背景：透明url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png)左中无重复；
背景尺寸：包含；
最大高度：85px；
保证金：0；
最大宽度：432px；
位置：相对位置；
}
#标题容器。内部h1：之前{
显示：块；
内容：“；
宽度：100%；
垫面：20%；
}

---

您可以对移动设备使用媒体查询。比如：

 @media all and (max-width: 540px){
  #header-container .inner h1{
    -moz-background-size:       260px auto;
    -webkit-background-size:    260px auto;
    background-size:            260px auto;
    width: 280px;
  }
  #header-container .inner h1 a{
    width:          260px;
  }
}

---

我想是这样的，但对于一些不同分辨率的设备，不可能正确判断。另外，这样做意味着高度/宽度保持不变，因此即使图像调整大小，

h1

容器仍然会溢出。谢谢，这正确地减小了图像大小，但是我仍然保留了85px的高度。我想做的是减少到图像的高度，最大85像素。显然，我不能只设置

最大高度

，我也不知道任何方法可以动态地确定渲染的

背景图像的高度。为此，您可以使用“填充”技巧来保持图像比例：为链接干杯，我只是看看。我现在想，
minheight
可能是一种方法，以避免标题看起来太小而显得愚蠢。@DavidGard我更新了我的答案，向您展示了这个概念。@DavidGard
padding中的百分比：20%
应该是您的图像宽度/高度比，比如500px/100px=20%。
 @media all and (max-width: 540px){
  #header-container .inner h1{
    -moz-background-size:       260px auto;
    -webkit-background-size:    260px auto;
    background-size:            260px auto;
    width: 280px;
  }
  #header-container .inner h1 a{
    width:          260px;
  }
}