Question

这可能是html标记

<header>
   <span> <!-- background image here -->  </span>
  <hgroup>
     <h1 class="testing">CSS3 and Compass Documentation</h1>
     <h2>here I am going to document my compass and CSS3 learning</h2>
  </hgroup>
</header>

这将是我的css的消息：

header span {
    background: url(banner.gif) center 0 no-repeat;
    background-size: 100% auto;
    display: block;
    height: 170px;  /* maybe this is where it needs changing*/
    width: 100%; 
}

一旦开始使浏览器窗口变小（例如iphone大小），问题便会开始。图像缩小（我希望如此），但仍然高度仍为170px ，在图像和hgroup内容之间留下更大的差距

我曾尝试使用height: 100%，但这根本不起作用（至少在这种情况下）。

如果您需要演示http://jsfiddle.net/Jcp6H/

Answer 1

在这种情况下，您希望将<span>元素调整为（背景）图像的高度。

我建议使用<img>标记而不是背景图片。

<header>
    <img src="http://movethewebforward.org/css/img/beanie-webasaurs.gif" alt="Webasaurs!" />
    <hgroup>
        <h1 class="testing">CSS3 and Compass Documentation</h1>
        <h2>here I am going to document my compass and CSS3 learning</h2>
    </hgroup>
</header>

在CSS样式中你的形象：

header {
  max-width: 950px; 
}

header img{
    display: block;
    width: 100%;
}

  header h1 {
    color: #324a69;
    font-size: 3em;
    text-align: center;
    text-shadow: 1px 1px 0 white;
    position: relative; 
}

  header h2 {
    clear: both;
    color: #705635;
    text-shadow: 1px 1px 0 white;
    font-size: 2em;
    text-align: center; 
}

很难根据背景图像来确定元素的高度......

Answer 2

首先使用跨度内的图像，因为它更容易使用。

 <span><img src="banner.jpg" /></span>

我试过这个例子，你可以用你需要的任何东西替换

header span img {
background: #960;
display: block;
max-height: 170px;
max-width:950px;
width: 100%;
height:100%;

}

您需要做的就是设置最大高度和最大宽度，这样它们将在不增加额外空间的情况下通过浏览器缩小。如果需要，您还可以设置最小高度等，以防止它变得太小。

尝试一下，看看它是否适合你。

如何使背景图像（或空跨度）的高度响应？

2 个答案: