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中遇到了不稳定的行为.

另外,在Firefox中使用font-size: 0而不是height: 0产生不稳定的行为.