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大小任何大于其背景图像。