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+ と互換性を持たせたいのですが、それ以外の場合は and を使用background-imageし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 に答える
1

display: inline-blockIE7 ハックを使用せずにそれを行う別の方法を次に示します。

<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

次のコードを使用できます。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 に答える
0

使用する：

display: inline-block;

div cssで。

画像をdivの「背景画像」として配置します。

于 2013-08-26T15:07:42.300 に答える