Question

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

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

该方法效果很好，但由于我的标题图片宽度为432px，因此移动设备出现问题。

因此我需要修改下面的代码，以便在#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

您应该使用background-size: contain而不是background-size: cover与min/max-width结合使用。

像这样更改你的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;
}

示例代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

@media查询可能会有所帮助：

#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 3

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

＆＃13;

#z1 {
  z-index: 1;
}
#z2 {
  z-index: 2;
  padding: 5%;
  color: white;
}

#z1, #z2 {
  position: absolute;
  left: 0px;
  top: 0px;
}

＆＃13;

<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>

＆＃13;

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

当宽度不够

4 个答案: