文字后面的图片

德拉西尔

我想在H1标签后面显示图像,我也希望图像宽度可以拉伸到与文本相同的宽度。

我的代码

<div style="display: inline;">
    <img src="http://img585.imageshack.us/img585/3989/m744.png" width="100%" height="68" />
    <h1 style="position: absolute; top: 0px;">Variable length text</h1>
</div>

JSFiddle:http : //jsfiddle.net/Aykng/

当前外观

当前外观

所需外观

所需外观

图像宽度应拉伸或缩小以填充div,如何实现呢?

我希望它与IE 7+兼容,否则我将只使用background-imagebackground-size

凯文·林奇

只需添加一些基本位置,即可轻松完成此操作

演示jsFiddle

div {
    position: relative;
}
h1 {
    display: inline;
}
img {
    position:absolute;
    width:100%;
    max-width: 100%;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文字后面的Font Awesome图标

来自分类Dev

文字后面的白框

来自分类Dev

文字后面的Font Awesome图标

来自分类Dev

CSS中文字后面的矩形

来自分类Dev

我的文字后面的背景转到页面的最后而不是停止

来自分类Dev

CodeGo.net>如何获得按钮文字后面的黑色纯色背景

来自分类Dev

如何在标题文字后面显示背景图片?

来自分类Dev

在图片后面添加文字

来自分类Dev

HTML TextBox数字后面的永久文本

来自分类Dev

div / 图像后面的文字

来自分类Dev

Android SpannableString在部分文字后面设置背景

来自分类Dev

Android SpannableString在部分文字后面设置了背景

来自分类Dev

多张图片前面的文字

来自分类Dev

正则表达式以匹配空格和数字后面的单词

来自分类Dev

Python正则表达式根据数字后面的逗号分割

来自分类Dev

仅在不带数字或数字后面的情况下匹配

来自分类Dev

使用 C++ 读取文本文件以读取特定关键字后面的值

来自分类Dev

文字后将图片浮动到底部

来自分类Dev

uitableview后面的背景图片视图

来自分类Dev

在后面的代码中设置图片的网址时无法渲染图片

来自分类Dev

如果关键字后面的表达式不符合承诺,`await`会发生什么?

来自分类Dev

为什么打印后跟在数字后面的“字符串状”值会被忽略?

来自分类Dev

如何提取字符串中特定关键字后面的子字符串?

来自分类Dev

如何避免kable格式化表格后面的文字?

来自分类Dev

PNG图片中透明切口后面的旋转木马

来自分类Dev

PostgreSQL在数字后面加上零

来自分类Dev

jquery在数字后面加值

来自分类Dev

代理后面的凉亭

来自分类Dev

删除后面的字符