2

すべての画像を2倍の大きさにするには、CSSに何を追加する必要がありますか？Firefox12で動作する必要があります。視覚的な品質の低下は気にしません。HTMLには、次のような画像が含まれています<img src="foo.png">。すべての画像の幅と高さは異なります。幅200％と高さ200％の比率で拡大縮小したいと思います。

画像コンバーターを使用してPNGを大きくできることを知っています。ただし、この質問では、CSSのみのソリューションに興味があります。

width=... height=...タグに2倍の大きさを追加できることは知ってい<imgますが、HTMLの変更（および既存の画像サイズの自動検出）が必要になるため、この質問ではCSSのみのソリューションに関心があります。

4

4 に答える 4

1

追加していただけませんか：

img {max-width:200%;}

あなたのCSSに？

これは「適応型」（または「レスポンシブ」）であり、画像を200％（幅）に「強制」しませんが、ビューポートが広い場合は、最大で200％の幅まで拡大縮小できます。足りる。

max-ビューポートの幅が十分でない場合は、200％の幅を削除して明示的に「強制」することができます。これにより、水平スクロールバーが発生します。

私が理解しているように、どちらか一方（heightOR width、ただし両方ではない）を選択すると、比率が保持されます。

CSSで要素のスタイルを<img>直接設定できます。これは、<img>タグを介して表示されるHTMLドキュメント内のすべての画像に適用されます。

次のように指定できます。

img {width:200%;}

「何があっても200％」にしたいなら。

于 2012-05-16T03:18:22.407 に答える
0

これは、CSS のみを使用したクロスブラウザーの方法では不可能のようです。

于 2013-09-09T22:24:29.660 に答える
0

ページのヘッド セクションで動作する JQuery を有効にします。

<img src="foo.png" ID='scalable'>

$("#scalable").css("width", "200%");
$("#scalable").css("height", "200%");
于 2012-05-06T14:45:33.087 に答える