1

TwitterのBootStrapを使用してWebサイトの一部を構築し終えたところですが、それを改善する方法を探しています。このモジュールには、幅はわかっているが高さが不明な画像があり（画像の高さは異なりますが、幅は固定されています）、画像の上にテキストがあります。私はもともと、div内に画像タグを配置し、position:absolute; top:0;その上にテキストをレイヤーを移動するために使用してこれを作成しました。

を使用するという考えは好きではありませんposition:absolute;。私の別の解決策は、画像をテキストを含むdivの背景として扱うことです。しかし、そうすることによって、私は2つの問題に遭遇しました。

  1. これは画像の高さに基づく変数であるため、divの高さを指定する方法がわかりません。幅は常にspan4（300px）になります。各画像にはせいぜい数語しか含まれないため、divの垂直方向のスペース全体を占めるには不十分です。
  2. ブラウザの幅が狭くなると、背景のdivの一部が切り取られます。これは、BootStrapが応答性を調整しようとしているためです。これをどのように修正しますか？

私は完全に困惑しており、明確な高さを定義できなければ、この代替ソリューションは不可能だと感じています。より良い代替案はありますか？

私のコード：

<div class="span4 cell">
    This is a placeholder image
</div>

.cell { background: url(http://www.placehold.it/300x200) no-repeat; }

明確にするために、これが私が作成しようとしているものの画像です： ここに画像の説明を入力してください

4

2 に答える 2

0

デモ.....................................。

HIは今これに慣れています

.span4.cell { 
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
 }

ライブデモ

于 2012-10-05T04:50:14.887 に答える
0

このcssコードを試してください。高さを自動に設定しました。境界線が必要ない場合は削除します。

.cell {
background:url("http://i.stack.imgur.com/klttw.jpg") no-repeat;
width:300px;
height:200px;
border: 1px solid red;
}

このデモを試してください：jsfiddle

于 2012-10-05T07:21:41.217 に答える