如何使背景圖像的高度（或空跨度）響應？

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

如何使背景圖像的高度（或空跨度）響應？

回答

相關問題