歪むことなく画面に画像をフィットしようとするときにサイズ変更時のスクロールバーの問題

StackOverflow https://stackoverflow.com/questions/6818096

質問

私はフルスクリーンスライドショーのような効果を作ろうとしています JSFiddleコードはこちら, 、しかし、私はそれを行う方法について疑問を抱いています。私の例のフィドルからわかるように、私は写真を歪めずに可能な限り大きくしたい（画面に適している）。また、垂直方向と水平方向に中央に配置したいと思います。

Horzontal CenteringそれはCSSで世話をしていますが、垂直センタリングにはJavaScriptを使用する必要がありました。

私の質問は次のとおりです。

  1. これを行うためのより良い方法はありますか（たとえば、CSSのすべて）？
  2. 最初のロードでは、画像がビューポートよりも幅が広い場合、画像がビューポートの高さを計算している間、スクロールバーが存在します。これは、私のスクリプトがDivとIMGにウィンドウにフィットすると、下部に白い隙間があり、それがスクロールバーの高さがあることを意味します。 Overflow：Hiddenを指定することでこれを回避できますが、それはちょっとした仕事のようです。より良い方法はありますか？画像を切り替える方が良いでしょうか？
  3. divが画像よりも広くなるようにサイズを変更すると、黒いdivの下に白いセクションがあり、垂直スクロールバーが作成されます。繰り返しますが、私はオーバーフローでこれを取り除くことができます：隠されていますが、私はそのアプローチが好きではありません。なぜそれがそこにあるのか、そしてそれを取り除く方法を知りたいですか？
  4. 時々、水平方向のスクロールバーを表示することができ、サイズを変更すると、オン/オフが点滅します。オーバーフロー：Hiddenはこれを修正しますが、よりクリーンなソリューションが必要です。
  5. これをコーディングするより良い方法はありますか、それとも私のjquery/javaScriptをさらに最適化できますか？
役に立ちましたか？

解決

まあ...それはトリッキーです。これを見つけた最善の方法は、実際にコンテンツを単一のセルテーブルに配置し、垂直および水平のアライメントプロパティを....中央と中央に設定することです。しかし、とにかく、それはできます。私はそれで遊んで、一緒に例を得ることができるかどうかを確認します。

編集：

わかりましたので、私がアドバイスする最初のことは、ブラウザに物事を比例的にサイズ変更させることです。 Divをサイズ変更する必要はありません。画像だけです。ブラウザに垂直方向のアライメントも把握できるようにすることができます。これは、計算するよりもはるかに優れた選択肢です。これは、コンテンツを単一のセルテーブルに配置することで実行できます。以下の例のコードは、純粋なHTMLおよびCSSです。 IMGの高さとウィンドウの高さに基づいて、100％AutoとAuto 100％の間で画像の高さと幅を100％100％切り替える必要があるという効果に何かを追加できます。うまくいけば、これがあなたの目標に少し近づくことを願っています。

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>

他のヒント

純粋なHTML/CSSのクロスブラウザーソリューションを知りません。アスペクト比と流体幅を持つ要素は、ブラウザがスクロールバーを表示 /非表示にすることを決定したときに「レース条件」をトリガーします。ブラウザは、この状況を制御している要素でこの状況を検出すると、スクロールバーを強制します。これは、JavaScriptでシミュレートすることもできます。また、この問題に遭遇し、小さなライブラリを作成しました。

https://github.com/ocbnet/layout

また、OPが求めていたものを実装するデモもあります。

http://www.ocbnet.ch/github/layout/demo/fullscreen.html

  1. はい（100％の高さの部分の場合）： html,body,div {height:100%}
  2. オーバーフロー：隠された私にはいいようです。その他の可能な解決策：
    1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> （document.writeは避ける必要があります）
    2. <img src="" width="1" height="1" /> （つまり、小さなデフォルトサイズを定義します - > scrollbarなし）
    3. @Gerbenの提案：CSS Max-Width（最高）
  3. 水平面の巻物がとるスペースのようです。この問題は特定のサイズ+比率でも発生します。
  4. これは、PictureratioがFulldivratioに等しいか、かなり近いときです。オーバーフローのあるフーが見つかりません：隠されています。
  5. わからない、IMOに十分なようです。

ええ、サイズ変更に関する奇妙な巻物棒は、境界線の効果のために起こります。 if に else またはその逆。

と このjsfiddle 私は水平方向のスクロールバーを取得することはありませんが、それでも時々垂直になります。

あなたはこれを行うことができます：

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

それはすべて純粋なHTMLとCSSです。構造でテーブルを使用したくない場合は、テーブルを使用するというジョセフの答えに代わるものです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top