4

画像が別の画像 (さまざまな幅、最大幅 620 ピクセル) と交換される Web ページの一部を処理する賢い方法を考えようとしています。テキスト キャプションはその上に絶対に配置されます。 . 相対的に配置されたコンテナの幅ではなく、画像の幅に基づいてテキストを絶対に配置したい。

画像自体ではなく、背景画像を使用することを考えていましたが、背景画像のある空の div であるという事実に対処する必要があるため、高さをハードコードする必要がありますが、これは機能しませんこれらの画像の一部は他の画像よりも背が高いためです。

皆さんが考えることができる解決策は大歓迎です。ありがとう！

4

4 に答える 4

4

私が 100% に従っているかどうかはわかりませんが、あなたがしようとしていると思われることを行う方法は次のとおりです。

相対位置でコンテナーを作成し、幅と高さを設定し、オーバーフローを非表示に設定します。

.container-outer {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

次に、単純に position: absolute を持つ内部コンテナーを内部に作成します。

.container-inner {
  position: absolute;
}

最後に、オーバーレイ テキスト スタイルを作成して、幅 100% で水平方向の中央に配置します (または配置したい方法で)。

.overlay {
  position: absolute;
  text-align: center;
  width: 100%;
  margin: 0;
}

jsfiddle の例を次に示します: http://jsfiddle.net/BGvca/1/

幸運を！

于 2012-09-12T17:44:54.460 に答える
1

もう少しCSSを使って前の答えを上げます

<div class="imageholder">
    <div class="caption">Simon &amp; Garfunkel</div>
    <img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg">
</div>​

.imageholder{
    position: relative;
    float: left;
}
.caption{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: Helvetica,sans-serif;
    font-size: 1em;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 1em 2em;
}

参照用にjsFiddleを参照してください。

于 2012-09-12T17:42:36.053 に答える
1

image を含む div を作成するとinline-block、その幅はコンテンツ、つまり画像のサイズに合わせてスケーリングされます。

コンテナーのサイズが正しく設定されたら、キャプションなどの他の子要素を、ラッパーを使用するか、ラッパーを使用せず、左右の余白に のtext-align: center値を使用して、その内部で中央に配置できます。auto

例を次に示します: http://jsbin.com/uyajaw/3/edit (物がどこにあるかを示す醜い境界線と背景を使用)

画像をクリックしてサイズを変更すると、キャプションが中央に表示されます。

キャプションが画像よりも大きくなる可能性が高い場合は、コンテナ div の幅が拡大され、中央揃えがずれてしまう可能性があることに注意してください。これを回避するposition: absolute; left: 0; right: 0;には、キャプションを設定するか、画像よりも常に小さいことがわかっている幅をキャプションに設定します。

于 2012-09-12T17:47:00.743 に答える
0

私がこれを考えすぎているかどうかはわかりませんが、これを行う方法があります。キャプションをラッパーdivに合わせたくない場合は、imagesLoadedイベント（jQueryプラグイン）も考慮する必要があります。それ以外の場合は、imgロードされていない場合は幅が0になるか、以前にロードされたimg幅がそこにあります（戻っていない場合）。

固定幅のラッパーdivとその中央にあるキャプションを示すこのフィドルを見てください。

于 2012-09-12T18:20:39.983 に答える