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

这是5月的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的市场：一旦你开始做浏览器窗口小（iphone尺寸例如）

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

的问题开始。图像缩小（因为我希望它），但是仍然高度保持170px离开图像之间和hgroup内容

我曾尝试使用height: 100%更大的差距，但这并不在所有的工作（在这种情况下，至少）。

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

来源

2012-06-08 aurel

在这种情况下，你想有你的<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; 
}

这是非常难的大小根据其背景图像元素的高度...

来源

2012-06-08 10:28:44

感谢。但出于利益考虑，它是更多钞票，以“大小根据其背景图像上的元素...的高度” - 让我想要 – aurel

我不认为这是可能的大小基于它的背景图像尺寸的元素。周围的其他方法虽然（底座上的元件尺寸背景图像大小）今天可以用CSS规则来实现很容易“背景大小：盖|包含”。 –

首先使用这是您跨度内的图像，因为它更容易处理。

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

我尝试这样做，你可以用任何你需要

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

}

所有你需要做的是设置一个最大高度和最大宽度，这样更换一个例子它们会随浏览器收缩而不会增加额外的空间。如果需要，您还可以设置最小高度等来阻止它太小。

试一试，看看是否适合你。

来源

2012-06-08 14:42:21 Magnum26

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

回答

相关问题