相关疑难解决方法(0)

使用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内容中放置一个图像.我正在寻找真正的文本替代品.

我有一个背景图像的DIV.但我的要求是如何根据背景图像的高度和宽度扩展DIV大小.我已经在这个链接的帮助下尝试了一些代码.

var src = $('#divID').css('background-image').
                      replace('url', '')
                     .replace('(', '')
                     .replace(')', '')
                     .replace('"', '')
                     .replace('"', '');
$('body').append('<img id="appendedImg" src="' + src + '" style="height:0px;width:0px"');
var img = document.getElementById('appendedImg');       
var width = img.clientWidth;
var height = img.clientHeight; 
$('#appendedImg').detach();

我正在寻找任何优雅的解决方案,如果可能的话.