QA@IT

CSSを使って、Imageを残りいっぱい表示したい。

3673 PV

今回質問したいのは、Imageを残っている限りいっぱい表示したいのですが、やり方がわかりません。
ちょっとわかりにくいので、例をあげて説明させていただきます。

今表示したいHTMLには2つの要素(エレメント)があります。
上から順に、

1つ目はタグ。
2つ目は画像。

このタグはユーザが入力できるため、Heightはデータにより毎回変わります。
そして画像は、可能な限り大きく表示したいため、このタグをのぞくHeightを全て使って、表示したいです。(スクロールはUI低下につながるため行いたくありません)

この場合、CSSにどのような値を指定すれば、今回の問題を解決できるでしょうか?

環境は、CromeのVersion28(ほぼ最新)です。

  • 回答に追記しました。 -

回答

スクロールバーが出てしまいますが、以下はどうでしょう
時間がないので半端ですみませんが投稿します。

試せばわかると思いますが、スクロールバーは出るだけで、スクロールの必要はありません。

html,body{
    height:100%;
    margin:0;
    padding:0;
}

.wrapper {
    display: table;
    height: 100%;
    width: 100%;
}
.upper {
    display: table-row;
    background: gray;
}
.remain {
    display: table-row;
    width: 100%;
    height: 100%;        
}
.remain img{
    /* margin-bottom:-50px; /* Chromeだとこれでスクロールバーが回避できるかも */
    width: 100%;
    height:100%;
}
    <div class="wrapper">
        <div class="upper">
            upper<br/>
            upper<br/>

        </div>
        <div class="remain"><img src="http://qa.atmarkit.co.jp/assets/logo-15717a90fdae42ca374def7906f66c53.png" /></div>
    </div>

上の例のimgのスタイルにも追記しました、margin-bottomに適当な大きさの負の値をいれておけばスクロールバーも出ずに
いけそうです(対処療法で理由はわかりません)。大きい値にしても画像が小さくなることもなさそうですね。

簡単に解説すると、肝となるのは、displayに指定しているtable, table-rowです。
そしてこれは要するに以下と同じような形にCSSで仕立てあげているということです。
(jsFiddleでためしてるんですが こっちだとスクロールバーも出ないですね。スクリプトなどで問題がなければこちらでもいいかもしれません。)

あとは各 height:100% 一つずつ消したり表示したりすれば感覚はつかめると思います。
画面サイズを100%として、upper以外のそれぞれが最大(100%)を主張しているから、という具合ですね。

    <table class="wrapper">
        <tr class="upper">
            <td>
            upper<br/>
            upper<br/>
            </td>
        </tr>
        <tr class="remain"><td><img src="http://qa.atmarkit.co.jp/assets/logo-15717a90fdae42ca374def7906f66c53.png" /></td></tr>
    </table>
html,body{
    height:100%;
    margin:0;
    padding:0;
}

.wrapper {
    height: 100%;
    width: 100%;
}
.upper {
    background: gray;
}
.remain {
    width: 100%;
    height: 100%;        
}
.remain img{
    width: 100%;
    height:100%;
}
編集 履歴 (2)
  • ご回答ありがとうございます。早速ためさせていただきました。
    問題なく、質問の内容の事が出来ていて感動しました。
    ただ、おはすがしながら原理がわからないのですが、これは親を100%に全部すれば、imgは自動的に(100-(その他の要素))%になるというような法則があるのですか?
    -
  • 回答に追記しました。 -
  • 丁寧なご回答ありがとうございます。http://jsfiddle.net/r3W5n/ こんなサービスがあったんですね。便利ですね。
    Tableタグに秘訣があったのですね。自分は今まで全てdivでやっていたので盲点でした。
    tableタグは今までほとんど使った事がなかったので、色々勉強してみようと思います。ありがとうございました。
    -
  • 失礼。アカウント間違えました。
    lain003 が自分です。とかくありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。