4

高さが固定されたコンテナがあります。その中には 2 つの子があります: image とその下の任意の長さの text です。テキストが必要な高さになり、画像が残りのスペースに自動調整されるようにします。

ここに私が持っている開始コードがあります:

http://jsfiddle.net/LLsT8/1/

<div id="parent">
<div>
    <img src="http://placehold.it/250x250&amp;text=2" />
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </div>
</div>

こちらがJavaScriptの解決策ですが、CSSのみでいいのか気になります。

http://jsfiddle.net/LLsT8/2/

更新: bfuoco のソリューションは私が必要としているものに非常に近いものですが、Firefox では機能しません。

http://jsfiddle.net/8S6Kf/1/

4

1 に答える 1

4

これにはプロパティのtableとtable-rowの値を使用することをお勧めします。display

image-wrapper 要素と text 要素はどちらもテーブルの行であるため、展開してテーブルの全領域を埋めます。image-wrapper は高さ 100% に設定されているため、残りのスペースを消費します。

image 要素は image-wrapper 内にネストされ、幅/高さが 100% に設定されているため、親と同じサイズになります。

ここにフィドルがあります： http://jsfiddle.net/8S6Kf/1/

HTML

<div class="parent">
    <div class="image-wrapper">
        <img class="image" src="http://placehold.it/250x250&amp;text=2" />
    </div>

    <div class="text">
        A line of text.
    </div>
</div>

CSS

.parent {
    display: table;
    height: 250px;
    width: 250px;
}

.image-wrapper {
    display: table-row;
    height: 100%;
}

.image {
    width: 100%;
    height: 100%;
}

.text {
    display: table-row;
}

アップデート

これは FF/IE では機能しません。この特定の問題については、実際の画像を div に置き換えて、background-image プロパティを使用できます。また、画像をテーブルセルにする必要があることに注意してください。そうしないと、テーブルがレンダリングされません。

画像を引き伸ばさない例を次に示します。

http://jsfiddle.net/8S6Kf/7/

HTML

<div class="image"></div>

CSS

.image {
    display: table-cell;
    height: 100%;
    width: auto;

    background-image: url(http://placehold.it/250x250&amp);
    background-size: 100% 100%;
}

画像の寸法を維持したい場合は、代わりに次の背景プロパティを使用できます。

background-size: contain;
background-repeat: no-repeat;
于 2013-05-23T23:43:58.303 に答える