私は100pxx100pxのdivを持っており、その中に背景画像を動的にロードしたいと思います。 これらの画像はすべてサイズが異なりますので、歪みのないdiv内に収まるようにしたいと思います。異なる寸法の動的背景画像
background-size:contains;現代のブラウザでのみサポートされています(通常のIEは本当に嫌なことです...)
誰かがアイデアがないので、この解決策をお勧めしますか? Annyヘルプありがとうございます。
私は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