当宽度不够时，通过 CSS 自动减小 background-image 集的大小

Question

我网站上的 header 包含一个设置为背景的图像，HTML 输出如下 -

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

该方法工作正常，但我在移动设备上遇到问题，因为我的 header 图片宽度为 432 像素。

因此，我需要修改下面的代码，以便在 #header-container .inner 的可用宽度小于背景图像的宽度时缩小图像尺寸。

我尝试了几种方法，包括使用 background-size: cover; 和 max-width，但我似乎找不到有效的组合。

我该如何解决这个问题？

这里 a JS Fiddle 显示了这个问题。只需缩小渲染视图的大小即可看到图像没有缩小。

这是我正在使用的 CSS -

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

Answer 1

@media query 可能对这里有帮助：

#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;
    }
}

Answer 2

您可以通过在 <img> 标签中用常规图片替换背景图片来强制执行此操作。使用绝对位置和 z-index 将内容容器（一个包含图像，另一个包含文本）层叠在一起。这是我遇到的与您类似的背景图像问题的解决方法，图层为管理内容提供了很好的灵活性。

#z1 {
  z-index: 1;
}
#z2 {
  z-index: 2;
  padding: 5%;
  color: white;
}

#z1, #z2 {
  position: absolute;
  left: 0px;
  top: 0px;
}

<div id="outer">
  <div id="z1">
    <img width="100%" src="http://www.verolago.com/blog/wp-content/uploads/2013/11/sailboat.jpg" />
  </div>
  <div id="z2">
    <p>I'm on a boat!</p>
  </div>
</div>

Answer 3

您应该将 background-size: contain 与 min/max-width 结合使用，而不是 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;
}

示例片段

#header-container{
  background-color: #053525;
 border-bottom: 1px solid #4DC386;
 padding: 10px 20px;
 position: relative;
  width: 100%;
  box-sizing: border-box;
}
#header-container .inner{
 margin: 0 auto;
 max-width: 1000px;
 position: relative;
}

#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;
  max-height: 85px;
 margin: 0;
 max-width: 432px;
  position: relative;
}
#header-container .inner h1:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 20%;
}

<div id="header-container">
 <div class="inner">
  <h1>
  </h1>
 </div>
</div>

Answer 4

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

 @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;
  }
}

当宽度不够时，通过 CSS 自动减小 background-image 集的大小

Automatically reduce the size of a background-image set via CSS when there is not enough width

css

background-image