2

我想在 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-imageand background-size。

4

5 回答 5

5

这可以通过添加一些基本定位轻松完成

演示jsFiddle

div {
    position: relative;
}
h1 {
    display: inline;
}
img {
    position:absolute;
    width:100%;
    max-width: 100%;
}
于 2013-08-26T15:37:06.110 回答
3

这似乎有效（也在 IE8 中）：

div<h1>与

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

http://jsfiddle.net/Aykng/9/

于 2013-08-26T15:21:00.743 回答
1

这是另一种不使用display: inline-block和 IE7 hack 的方法：

<div class="parent">
    <img src="http://img585.imageshack.us/img585/3989/m744.png" 
         width="100%" height="68" />
    <h1>Variable length text</h1>
</div>

使用 CSS：

.parent {
    display: inline;
    position: relative;
}
.parent img {
    position: absolute;
    top: 0;
    left: 0;
}
.parent h1 {
    display: inline;
    position: relative; /* this makes sure the h1 is in 
                           front of img in stacking order */
    border: 1px dotted lightgray;
    padding: 0 10px; /* optional, tweak left/right as needed */
    vertical-align: top;
    line-height: 68px;
}

演示小提琴：http: //jsfiddle.net/audetwebdesign/BfMDJ/

这与Vector早期的解决方案相同，只是图像高度的处理方式不同。

我选择将行高设置为h1匹配背景图像的行高（本例中为 68px），然后应用vertical-align: top. 如果您愿意，这可以更轻松地垂直对齐文本。

潜在问题

如果将图像宽度设置为 100% 并设置高度，则图像会失真。如果您想要一个更可靠的答案，您需要指定有关背景图像的内容以及您希望文本如何垂直居中。

于 2013-08-26T15:21:48.083 回答
0

采用：

display: inline-block;

在 div css 上。

并将图像作为 div 的“背景图像”。

于 2013-08-26T15:07:42.300 回答
0

您可以使用以下代码。它将适用于包括 IE 7 在内的浏览器。

<div style="display: inline-block;background: url('http://img585.imageshack.us/img585/3989/m744.png') repeat; *display:inline;*zoom:1;">
    <h1>Variable length text</h1>
</div>
于 2013-08-26T15:23:31.623 回答