ここでQ & Aをたくさん見てきましたが、トピックがある場合はそれを見つけることができません。div内の縮尺イメージとCSSを使用したイメージの最大の側面に合わせる
私は動的な幅と高さのdivを持っており、その中に任意のサイズの画像を収め、アスペクト比を維持したいと考えています。これは、上または下の画像をスケーリングすることができます
を私は運と考えることができ、幅、高さ、最大幅、最大高さ、オブジェクト・フィットなどのすべてのコンボを試してみました、常に失敗するケースが少なくとも1つあります。私が見たほとんどの解決策には、ハードコードされた最大幅または高さの値がいくつか含まれています。上記のすべてのケースをCSSと動的サイズのdivコンテナでのみ動作させることは可能ですか？
PS私のターゲットブラウザは、違いがある場合、Edgeです。
THANKS !!
これを行う方法が1つあります。
は（フィドル、https://jsfiddle.net/mghgsk5e/を参照してください）background-size: contain、background: url(path/to/image)を使用して、格納するためのスケーリングを設定するbackground-size属性を使用してCSSの背景として画像を適用します。
オプション1は満たされませんアップスケールの要件、ダウンのみ。 –
あなたは正しいです@ルロイ、私の悪いの答えを編集しました。 –
ありがとうマティアス！私はあなたの例を拡張し、Edgeでテストしました：https://jsfiddle.net/rambutan2000/q4kr4z1r/すべてのケースが機能しています。 – Geordie
最新のすべてのブラウザ（エッジ）とInternet Explorerのすべてのバージョンでは、CSSプロパティobject-fitを使用できます。
例： https://jsfiddle.net/09cpe9e0/1/
私はそうしても安全である場合にのみCSSのバージョンを残して、後日削除することができ、Internet ExplorerとエッジのためのJavaScriptのソリューションを実装するために傾斜させることでしょう。
ありがとうLe-roy、ちょうど100％はっきりしている、オブジェクトフィットなしですべてのケースをCSSで動かす方法はない？ – Geordie
私は何かを考え出すことができませんでした。可能であれば、非標準のハックを見つけることは可能かもしれませんが、私はそのルートをとることを避けたいと思います。 –
https://jsfiddle.net/rambutan2000/8rmvp8a7/ – Geordie
私は単純なスライドショーを作成しているので、これを尋ねました。ここではすべての機能が動作するサンプルがあります（EdgeとChrome）https://jsfiddle.net/rambutan2000/vvsnus6o/ – Geordie
ここではバックグラウンドのハックのない例がありますが、部分的にEdgeで作業しています。https://jsfiddle.net/rambutan2000/tu2ps0go/ – Geordie