私は100pxx100pxのdivを持っており、その中に背景画像を動的にロードしたいと思います。 これらの画像はすべてサイズが異なりますので、歪みのないdiv内に収まるようにしたいと思います。異なる寸法の動的背景画像
background-size：contains;現代のブラウザでのみサポートされています（通常のIEは本当に嫌なことです...）
誰かがアイデアがないので、この解決策をお勧めしますか？ Annyヘルプありがとうございます。
標準的なIE。あなたは、フィルタでこれを行うことができます。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOUR_IMAGE', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOUR_IMAGE',
sizingMethod='scale')";
私はあなたが背景画像コンテナとして100x100 divを使用しないことをお勧めします。イメージコンテナとして使用するにはimgタグまたは別のdivを100x100 divの内側に追加する必要があります。
次に、イメージの向きを調べるための簡単なアルゴリズムとイメージコンテナを100x100 divに最適にフィットさせ、イメージコンテナのheightとを拡大縮小するように設定します。次に、100x100 divの内側に縦横に中心を合わせます。
私はjsfiddleで例を投げました。
ロード '![]()
' 'div'内部。あなたが必要とするものなら、 '![]()
'をcssのバックグラウンドのように動作させることができます。 –
Joonas