0

私は、本当にシンプルであるべきだと感じているもののほとんどの解決策を見つけ続けていますが、それを理解することはできません. (注 - 私は現在、CSS を学習するための非常に初歩的な段階にいます)

ページに配置する画像が 1 つあります。中央の水平/垂直。divウィンドウの高さと幅の 80% のコンテナー内。div高さまたは幅のいずれか小さい方に基づいて、画像を引き伸ばしてその幅を埋めたいと思います。

これはほとんどの人にとって簡単なことだと思いますが、繰り返しになりますが、私はただ学んでいます。これに関する方向性は素晴らしいでしょう。

説明が不十分な場合に備えて、図を作成しました。 ここに画像の説明を入力

4

1 に答える 1

1

これを試してくださいhttp://jsfiddle.net/David_Knowles/ddh2k/

これは、あなたが望むことのほとんどを行います。画面の高さが画像固有の高さよりも低くなったときに、画像を使用可能な高さの 80% にしたい場合は、JavaScript を追加する必要があります。

<body>
<div id="container">
        <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>

html,
body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color: #eee;
}
#container{
    margin: auto;
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;
    white-space:nowrap;
    background:#aae;
}
#container:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
img {
    width:80%;
    height:auto;
    display:inline-block;
    vertical-align:middle;
    background:#fff;
}
于 2013-05-12T19:11:43.123 に答える