CSS流体图像替换？

Posted 2023-03-06

【中文标题】CSS流体图像替换？

【英文标题】：CSS fluid image replacement?

【发布时间】：2013-05-19 06:21:21

【问题描述】：

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

【参考方案1】：

我使用与@Warren Whipple 相同的方法，但我通常使用compass/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 变量替换为您的图像名称。

---

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

【参考方案2】：

花了一些时间，但我想出了一个办法。关键是使用padding百分比来设置高度，因为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 中会产生不稳定的行为。

【讨论】：

对于那些可能对此感到困惑的人，请务必只设置 background-image 属性，而不是整个 background 简写，因为设置位置会使这个绝妙的技巧失效

@Warren，是否可以设置最大尺寸？说我不希望徽标限制 100% 的宽度。说在 200px 之后，它会保持不变。有可能吗？

【参考方案3】：

在包含背景图片的 div 上：

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