オーバーフローテキストはコンテナのサイズを動的に変更する必要があります

私は自分のウェブページ上に1つの画像を追加しました。私はそれにテキストを置いた。オーバーフローテキストはコンテナのサイズを動的に変更する必要があります

小さい解像度のスクリーンで開くと、テキストがボックスから垂直に出てきます。私はそれをやめて、ジョグボックス（私はここdivを意味する）をテキストに従って縦方向に伸縮可能にしたい。

これを行う簡単な方法はありますか？

編集： bodyタグはこの

<body> 
<div .class="container"> 
    <img src="pic.jpg" class="pic" alt=""> 
    <h2>some lenghty text</h2> 
</body>

ようになり、CSSは、上記のコード部分とそうここ

.pic { 
    /* because as the pic is very large and need to center that */ 
    width:40%; 
    margin-right:auto; 
    margin-left:auto; 
    display:block; 
} 

.container { 
    width:100%; 
    margin-right:auto; 
    margin_left:auto; 
    top:200px; 
    position:relative; 
} 

h2 { 
    position:absolute; 
    font-size:20px; 
    font-color:blue; 
}

行く私は場合、私はつまり、欲しいものを達成しておりませんテキストの長さが増加する（一部の小さな画面やサイズ変更中に）、コンテナ、すなわちjpgを画面の垂直方向に長く延長して、そのボックスの画像自体の中にテキストがうまく収まるようにする。

出典

2010-12-30 simple-coder

試しオーバーフロー-Y：自動; – Vivek

@Vivek、ボックスから出てきた場合、オーバーフローを設定すると、オーバーフローするテキストがどのように表示されるか（表示されないか）のみが変更されます。箱が引き伸ばされることはありません。 –

'{}'コードボタンを使い、質問を正しく書式設定する方法を一読してください。 –

おそらくdivは一定の高さを与えられていました。あなたがfirebugやchromeを使ってdivの「要素を調べる」場合、この高さを設定するCSSルールを見つけられるはずです。次に、そのルールを削除するか、 height:を min-height:に変更してください。

更新：

問題はdiv要素が拡大しているが、画像がないということです。 CSS3 background-sizeプロパティがよくサポートされるまでは、あなたは、単に100％にIMGの高さを設定することができます。

img.pic { 
    height: 100%; 
}

出典

2010-12-30 10:52:44

ありがとうございました。しかし、私はcssの高さタグを残していました。 .. –

@シンプルコーダー、私はCSSが表示されません。いくつかのJavaScriptがCSSの高さを設定している可能性もあります。チェックする最善の方法は、ファイヤーバグとクロム（CSSのサイドパネルとインライン 'style'属性の両方）の要素を調べることです。まだ高さがどこかに設定されていないと確信しているなら、あなたの質問にいくつかのHTMLとCSSを投稿すると助けになります;） –

申し訳ありませんbox9、私はちょうど今追加しました...あなたは見ています –

オーバーフローテキストはコンテナのサイズを動的に変更する必要があります

答えて

関連する問題