CSS流体图像替换？

Question

使用 CSS 将文本替换为图像是一种众所周知的做法。 CSS-Tricks 拥有一些技术的博物馆 ( http://css-tricks.com/examples/ImageReplacement/ )。

但这些都不允许替换为流畅的图像(例如，一个 Logo 横跨 100% 的流畅页面布局)。是否可以使用 CSS 进行流畅的图像替换？

几乎所有图像替换技术都使用背景图像。而且我知道您可以设置 background-size: 100%。但要使文本元素的高度与其宽度成比例并不简单，因为浏览器不会将背景图像视为内容的一部分。

我知道任何常见的图像替换技术都可以轻松地与媒体查询结合使用，以逐步将文本元素的大小更改为有效的特定高 x 宽比。但这是渐进的，而不是流动的。

我确实找到了一篇讨论这个的博客文章 ( http://viljamis.com/blog/2011/fluid-image-replacement.php )。但事实证明，thay 方法实际上需要将图像放入 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 中产生不稳定的行为。