1

コンテナーの背景画像をコンテナーに合わせて引き伸ばす CSS を作成することができます。しかし、その逆、つまりコンテナのサイズを背景画像に合わせて変更する CSS を作成することは可能でしょうか?

過去に、私は JQuery を使用して醜いハックを使用しました (画像のファイル名で実際に指定されている画像のサイズに依存するため、満足していません)。したがって、CSS を使用してこれを行うことを強く好みますが、それが不可能な場合は、可能な限りクリーンな Javascript/JQuery ソリューションにも満足しています。

(補足: これは間違いなく奇妙なことのように思えます。その理由は、特定のデバイス パラメータに従ってサイズ設定された画像を吐き出すレンダリング エンジンを使用しているためです。)

4

2 に答える 2

1

cssだけでは不可能だと思いますが、ほとんど不可能だと言っているわけではありません。ユースケースが何であるかはわかりませんが、背景を設定している要素内にimgタグを埋め込むことができます。imgタグのsrcを同じ画像に設定すると、ブラウザは親要素を同じサイズでレンダリングするように強制されます。

cssを使用すると、要素を非表示にレンダリングでき、背景要素はフルサイズでレンダリングされます。jQueryを使用して、ラッパー要素に設定された同じ背景画像を持つ非表示のimg要素を動的に挿入することもできます。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div .img { visibility: hidden; }
        div { background: url(img.jpg) top left no-repeat; }
    </style>
</head>
<body>
    <div><img src="img.jpg" /></div>
</body>
</html>

この方法の主な結果は、IEおよびおそらく他のブラウザがイメージを2回ダウンロードすることです。Chromeは、その問題を回避するのに十分スマートです。しかし、FF、Safari、Operaはテストしていません。

于 2012-05-14T18:59:46.077 に答える
1

要素は、背景画像のサイズを認識しません。

これは JavaScript で行う必要があります。画像を変数に読み込み、そこで寸法を確認して、コンテナに転送できます。

于 2012-05-14T18:50:53.010 に答える