5

CSSで幅100%に設定されているにもかかわらず、画像のズームを有効にする方法は?

この質問は矛盾しているように聞こえるかもしれません -- 何かを 100% 幅に設定した場合

img {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    margin-bottom: 0.66em;

あなたはそれが欲しいですよね？

ええと... これを図にします: 幅を 100% にしたい画像のギャラリーがあります。ユーザーがズームすると、テキストのみがズームされます。画像は、どのズーム レベルでも 100% のままです。

私が望むのは、この動作です：

画像はニュートラル ズーム レベルで 100% 幅ですが、ユーザーがページをズームすると、画像もズームされます。ズーム）。

これに対するCSSのみの解決策はありますか?

JavaScript を使用して考えられる解決策は、代わりに JavaScript で画像の幅をブラウザー ウィンドウの px に設定することです。ズームは期待どおりに画像に対して機能します。ユーザーがブラウザのサイズを変更すると、JavaScript は画像の幅を再度変更する必要があります。

4

3 に答える 3

2

ズームの動作はブラウザに依存し、構成も可能です。訪問者が使用するブラウザに応じて、動作はあなたが説明したものか、すでに望んでいるものになります!

動作を制御する唯一の方法は、ズームを自分で実装することです。Javascript は 1 つの方法ですが、ブラウザーのズームは決して制御できないことに注意してください。アクセシビリティ上の理由から存在します。独自のズームにより、ユーザーは、スクリプトが動作するように決定した要素を別の方法でズームできます。

于 2013-04-03T18:28:26.700 に答える
1

悲しいことに、これは JavaScript なしでは実行できません。必要な機能は、彼らがホバリングしている PX のズームであるからです...はい、ズームインしすぎることはできますが、彼らが移動しても画像は変わりません。期待どおり、画像の上にカーソルを置きます。jQueryまたはMootoolsなどの他の JavaScript ライブラリを使用することを選択する必要があります。

jQuery Zoom のようなものを Google で簡単に検索すると、このタスクを簡単にするために事前に作成されたプラグインの量に圧倒されます。

あなたの要件を満たすことがわかった2つを次に示します。

于 2013-04-03T18:36:33.730 に答える