8

現在、ブラウザのサイズに応じて画像のサイズを変更しようとしています。画像を水平方向にサイズ変更することができました.ブラウザウィンドウを狭くすると、画像は比例してサイズ変更されます. しかし、ウィンドウを垂直方向にサイズ変更すると、Firefox はそれをしたくないようです! コードはかなり単純です

<body>

    <div id="content">
        <img src="images/abc.jpg">
    </div>      

</body>

そしてCSS：

#content {  
    height: 100%;
    padding: 50px;
}


#content img{
    max-height:100%;
    max-width: 100%;
}

別の問題は、画像がクロムで垂直方向にサイズ変更されているように見えることですが、これを開始する前にブラウザの下部を画像の上にドラッグする必要があります。いわば、下部のコンテンツパディングが画像の下部に「ヒット」するとすぐに、画像のサイズ変更を開始したいと思います。これが理にかなっていることを願っています。

どんな助けでも大歓迎です

4

4 に答える 4

2

Twitterブートストラップ2から取得したこれを試してください

html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto; 
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
于 2012-12-13T08:32:37.740 に答える
1

高さが無限に続く可能性があるため、ブラウザ ウィンドウに対する高さをパーセント関数で設定することはできません。私が言っているのは、パーセント値を使用するには、高さが固定されているものの中に入れる必要があるということです。幸運を！

-b

于 2012-08-06T15:20:37.777 に答える
0

「max-height」および「max-width」プロパティのみを指定しました。実際の「幅」または「高さ」プロパティを指定しない場合、イメージは最初に物理的な寸法の幅と高さを取得します (指定された max-height と max-width より大きくない場合)。

あなたが気づいた行動は正しいと言いました。答えは、既に述べたように、画像が縦向きか横向きかに応じて、幅または高さの初期プロパティも指定することです。

于 2012-08-06T15:20:59.933 に答える
0

それはあなたが望むものですか？

#contents の高さが高くならないように、実際には html と body に高さを追加しただけです。

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

(そして、box-sizing: border-box から #content へ、あなたがそれを望むように思われるので)

于 2012-12-13T08:43:04.517 に答える