CSS流體圖像替換？

Question

使用CSS將文本替換為圖像是眾所周知的做法。 CSS-Tricks有一些技術博物館（ http://css-tricks.com/examples/ImageReplacement/ ）。

但是這些都不允許用流體圖像替換（例如，橫跨100％流體頁面布局的徽標）。 是否可以使用CSS進行流體圖像替換？

幾乎所有圖像替換技術都使用背景圖像。 我知道你可以設置background-size: 100% 。 但是，將文本元素的高度與其寬度一起縮放並不是直截了當的，因為瀏覽器不會將背景圖像視為內容的一部分。

據我所知，任何常見的圖像替換技術都可以輕松地與媒體查詢相結合，逐步將文本元素的大小更改為特定的高度x寬度比率。 但這是增量的，而不是流動的。

我找到了一篇討論此內容的博客文章（ http://viljamis.com/blog/2011/fluid-image-replacement.php ）。 但事實證明，實際上需要在html內容中放置一個圖像。 我正在尋找真正的文本替代品。

Answer 1

采取了一些擺弄，但我想出了辦法。 關鍵是使用填充百分比來設置高度，因為padding-top和padding-bottom百分比與容器寬度相關聯（與height不同，它與容器高度相關聯）。

HTML

<h1 class="logo">The Logo</h1>

CSS

h1.logo {
    background-image: url('logo.png');
    background-size: 100%;
    width: 100%;
    padding-top: 29.8%;
    height: 0;
    text-indent: -9999px;
}

通過將圖像高度除以寬度來計算padding-top 。

工作示例： http ： //jsfiddle.net/bXtRw/

我會注意到使用overflow: hidden而不是text-indent: -9999px也應該有效。 但是我在Firefox中遇到了不穩定的行為。

此外，使用font-size: 0而不是height: 0會在Firefox中產生不穩定的行為。

Answer 2

在包含background-image的div上：

div {
    max-width: 100%;
    width: 100%;
    min-height: 300px; //Adjust this number accordingly
    height: auto;
}

Answer 3

我使用的方法與@Warren Whipple相同，但我通常使用指南針 / sass 。 如果你不僅限於使用vanilla CSS，那么這個方法很好地抽象了幾個部分：

// Only works in Compass/Sass – not regular CSS!
h1.logo {

    $header-logo-image: "logo.png";

    background: image-url($header-logo-image) no-repeat;
    background-size: 100%;
    height: 0;
    padding-top: percentage( image-height($header-logo-image) / image-width($header-logo-image) );
    overflow: hidden;
    width: 100%;
}

您只需要將$header-logo-image變量替換為$header-logo-image名稱即可。

---

另外，我有時會添加： max-width: image-width($header-logo-image); ，這將防止h1大小任何大於其背景圖像。