CSS流体图像替换？

Question

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

但是，这些技术都不允许使用流体图像进行替换（例如跨越整个流体页面布局的标志）。 使用CSS实现流体图像替换是否可行？

几乎所有的图像替换技术都使用background-image。 我知道可以设置background-size:100%。 但要使文本元素的高度随其宽度进行缩放并不直观，因为浏览器不将背景图像视为内容的一部分。

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

我找到了一篇讨论此问题的博客文章 (http://viljamis.com/blog/2011/fluid-image-replacement.php)。 但事实证明，该方法实际上需要在HTML内容中放置图像。 我正在寻找真正的文本替换。

- Warren Whipple

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中产生不稳定的行为。

- Warren Whipple

---

对于那些可能遇到混淆问题的人，请确保仅设置background-image属性，而不是整个background简写，因为设置位置将使这个很棒的技巧失效。 - Jason

@Warren，能否设置最大尺寸？比如说我不想让标志的宽度拉伸到100％。比如在200像素后，它将保持不变。这是可能的吗？ - Morpheus

Answer 2

关于包含背景图像的div：

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

- lockedown

Answer 3

我使用与@Warren Whipple相同的方法，但通常使用compass/sass。如果您不限于使用纯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变量即可。

---

此外，有时我会添加：max-width: image-width($header-logo-image);，这将防止 h1 的大小超过其背景图像。

- Tim