2016-04-22 3 views
1

私は敏感なウェブサイトを持っています。私の画像は「プレビュー」と呼ばれるdivウィンドウにあり、ウィンドウの高さを超えてはいけません。それは特定のイメージのために働いているようです、そして、なぜ私がそれらのすべてのためにうまくいかないのか理解できません。最大高さは時々動作しますが、必ずしもそうではありません

おそらく必要はありませんが、これはdivのコードです。

.preview { 
    max-height: 100%; 
    max-width: 100%; 
} 

次は、動作している画像の例です。

<img class="preview" src="assets/works/design/posters/spring2016.jpg"> 

これは機能しません。それはdivの高さよりも背が高い。ここで

<img class="preview" src="assets/works/reindeer.jpg"> 

は、私のサイトです:alexjberger.com

誰もが任意の洞察力を持っていますか?それは有り難いです。

+0

あなたのサイトに行って、あなたが何を言おうとしているのか理解できなかったが、ついにそれを得た。 div自体は決して100%を超えません。それはイメージです。私はこれをあなたのCSSに追加することをお勧めします: '.preview img {max-height:100%;最大幅:100%} ' –

+0

あなたは答えを持っているように見えますが、あなたがスケッチブックのものは素晴らしい、本当にユニークであると言いたいと思っていました。 –

+0

[CSS max-height not working](http://stackoverflow.com/questions/520710/css-max-height-not-working)または[max-height:x%が動作しません](http ://stackoverflow.com/questions/27992881/max-height-x-doesnt-work-on-chrome) –

答えて

2

画像を親に与えるには、pの高さを設定する必要があります。パーセントで所定の高さを尊重する要素について

、親等も高さを有していなければならない、そしてそれは同様にパーセントで与えられた場合、次の親の一つは、多くの場合、html, body { margin: 0; height: 100%; }

このルールで終わります
+0

ピクセルを使用せずにどのくらいの高さにすることができますか? –

+0

@AlexBerger 'p:'に 'height:100%;'を設定すると、うまく動作します – LGSon

+0

これは完全に機能しました。本当にありがとう。 –

関連する問題