縦横比100％の縦横比を維持する（CSSのクロップオーバーフロー）

Question

フルスクリーンのバックグラウンドスライドショーに取り組んでいます。

私の質問は次のとおりです。画像をフルスクリーンで表示し、アスペクト比を維持するには、どうすれば設定できますか？

最小高さと最小幅の両方が設定されている場合は縦横比を維持しません。私は、コンテナの完全なカバレッジで画像を切り取ってください。

Diagram of Problem

は、私は私は1つの寸法が固定されており、自動車に他の持っている必要があります信じています。画像の大きさとビューポートの大きさが可変であることを考えると、少なくとも2組のCSSルールが必要であり、どちらを使うべきかを計算するにはjavascriptが必要だと思っています。これを行う簡単な方法はありますか？

私は自分の問題を説明する図を作成しました。暗い色は元の画像です。メジアンの色が望ましい効果です。より明るい色は、スケールアップされた画像からの望ましいオーバーフローです。

私はKen-Burnsエフェクトのフルスクリーンの背景に取り組んでいます。私はトランジションについて心配する必要があることを知っていますが、後でそれを処理できることを望んでいます。ケン・バーンズエフェクト用

チュートリアル：解決
http://cssmojo.com/ken-burns-effect/

：おかげMajuバックグラウンドカバーに私を導入するため。画像をdivに変更し、Ken Burnsコードのjavascript + cssを画像からdivに変更するとうまくいきました。スクリプトは要素クラスを変更するので、MajuのCSSを別の方法で使用したり、スクリプトを変更する必要があります。

Answer 1

css background-imageで画像を使用する場合は、任意の要素のbackground-sizeに設定できます。私は右のあなたを理解していれば、あなたが必要なもののように：

.background { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-repeat: no-repeat !important; 
 
    background-position: 0 0 !important; 
 
    background-attachment: fixed !important; 
 
    -webkit-background-size: cover !important; 
 
    -moz-background-size: cover !important; 
 
    -o-background-size: cover !important; 
 
    background-size: cover !important; 
 
}

<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>

カバーは、それが常に正しいアスペクト比の素子全体をカバーするような方法で画像に影響を与えます。

新しいCSSスタイルもありますが、IE/MEでは動作しません。私は背景画像とdivを使用することをお勧めします。このため

https://css-tricks.com/almanac/properties/o/object-fit/

。