6

使用 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 内容中。我正在寻找真正的文本替换。

4

3 回答 3

15

费了一番功夫，但我想出了一个办法。关键是使用填充百分比来设置高度，因为百分比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 中产生不稳定的行为。

于 2013-05-24T05:42:49.037 回答
0

在包含背景图像的 div 上：

div {
    max-width: 100%;
    width: 100%;
    min-height: 300px; //Adjust this number accordingly
    height: auto;
}
于 2013-05-23T19:56:11.103 回答
-1

我使用与@Warren Whipple 相同的方法，但我通常使用 / 。如果你不局限于使用 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要用你的图像名称替换变量。

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

于 2014-03-11T20:04:19.237 回答