javascript - 画像をクリックして拡大または縮小するために使用できる簡単な JS はありますか?

htmlで画像を拡大・縮小できるjsを参考にしたいのですが、画像は大きい画像と小さい画像の2種類を使うのがベストです モールのコメント用にもっと簡単な画像共有機能はありますか?わかりません。

習慣沉默 2017-05-19 10:47:30 0  2  742

画像の位置合わせと拡大縮小

私の W3Schools Web サイト上のこのコードについてサポートが必要です。すべての要素をページの中央に配置したいと考えています。ただし、中央に配置すると、機能のレンズは画像の古い位置をターゲットにします。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom コードを変更したのですが、画像が中央にあるときにレンズが画像の外側にあることが理解できません。これが彼女の以前の投稿のように、画像の中心、レンズの位置が間違っていたことが解決されました!!! この状況を修正するには、

P粉015402013 2024-03-22 11:26:07 0  1  317

ズーム結果が黒になる

ソースコードに従って拡大縮小した後に得られる画像が黒く何も表示されないのはなぜですか?

Hide on bush 2019-02-21 13:41:46 0  2  1240

HTML ホバー画像: 画像を超えてクリック可能な領域を拡大します

私は css/html については比較的初心者です。しばらくこの問題を調べてきましたが、解決策が見つかりませんでした。問題は、(Bulma を使用して) 以下のコードを使用すると、img3.jpg の上にマウスを移動すると、クリック可能な領域が最初のブロックから始まるブロック全体になることです。問題は、Bulma の is-column/is-multiline と、私が提供したオーバーライド CSS 定義との間の競合ではないかと思います。 <styletype="text/css">ul{リスト-

P粉459440991 2023-09-10 16:08:26 0  1  683

CSS スプライトを背景画像に拡大縮小する: ガイド

.my-sprite{background-image:url("https://i.stack.imgur.com/lJpW8.png");height:100px;width:100px;background-position:00;background-position:-200px0px;}<divclass="my-sprite">&l

P粉063862561 2023-11-02 10:39:28 0  2  758

JavaScript - tinymce エディターでコンテンツ画像のサイズ変更を無効にするにはどうすればよいですか?

タイトルにあるように、現在、Weibo コンテンツを送信するためのエディターとして tinymce が使用されています。画像を挿入した後、画像をクリックするとサイズを変更できる、つまり 4 つの点が表示され、画像を拡大または縮小できることがわかりました。これを無効にするにはどうすればよいですか?

巴扎黑 2017-07-05 10:41:20 0  1  1168

javascript - キャンバスの画像処理に関する問題

ユーザーがアップロードした画像を処理するにはキャンバスを使用する必要があります。ユーザーがアップロードしたサイズは非常に大きい可能性があります。たとえば、現在のブラウザ ウィンドウの幅と高さを超えるため、表示領域に比例して拡大縮小します。ブラウザの画像をキャンバス上に描画しますが、これはユーザーの絵を縮小することに相当します...

扔个三星炸死你 2017-06-10 09:49:16 0  3  970

SVG イメージを使用してレスポンシブ グリッド エリアを作成できません

SVG 画像を含むレスポンシブなグリッド領域を作成しようとすると、グリッド領域の幅が任意になったり、画像を停止せずに特定の点まで拡大または縮小したりできないなどの奇妙な動作が発生します。私が得た最も近いものは次のとおりでした: *{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr;background-color:green;padding:1r

P粉022140576 2023-08-30 19:15:16 0  1  548

JavaScript - 画像をブラウザに読み込むと、画像の周囲のピクセルがぼやけるのはなぜですか?

1000px*1000pxの画像を作成し、最初のピクセルに塗りつぶしの色を付けました。Windowsでズームインした後、通常のフロントエンドはこの画像を要求し、スタイルを設定しました: width: 40000px; height: 40000px; 何度もズームインした後、周囲のピクセルが非常にぼやけていて、どれだけ拡大しても、提示するものは常にあるべきだと感じています...

高洛峰 2017-05-19 10:34:48 0  3  536

画面サイズに合わせたボタンの作り方～背景画像の使い方を詳しく解説

私は、複数のグラフィックスを並べて表示し、デバイスの画面サイズに適応させる必要がある pfsensecaptiveportal を開発しています。これは、画像入力タイプを使用するとうまく実現できます。ただし、pfsense デバイスはこのコミットを正しく認識しません。機能するには、コミット タイプの値が「Continue」である必要があります。代わりに背景画像を使用しようとしましたが、背景画像が拡大縮小されません。画面が小さくなると、フルサイズで表示され、トリミングされて表示されます。背景画像のサイズを変更できるようにするにはどうすればよいですか? #コンテンツ{フォントファム

P粉345302753 2023-08-16 13:38:12 0  1  606

javascript - 記事内のフロントエンド画像を実装する方法。クリックするとポップアップ表示され、クリックすると縮小されます。

最近のプロジェクトで、メンバーが公開した記事があるのですが、その記事を携帯電話でイラストを表示すると、拡大して表示する必要があり、クリックして拡大できないことがあります。ここで操作できるのはimgタグのみです。 $("img").click(function(){ {code...} }) img にタグ href を追加し、img のパスを書き込み、画像をポップアップします。

过去多啦不再A梦 2017-06-26 10:51:46 0  5  966

Android のイメージビューにパスと音声ファイルを追加し、パスと音声の場所を記録し、編集中にその場所を変更しないようにする方法

絵上にパスを描きます パスの終点に音声を追加できます 音声をクリックすると再生します 完了するとパスと音声の位置が記録されます 編集時にパスと音声を削除して編集することができます画像が拡大縮小される場合、それに応じてパスも拡大縮小する必要があります。

黄舟 2017-05-24 11:37:46 0  1  909

React を使用して画像上にインタラクティブ マーカーを配置する

助けてください。ホームページには以下のような画像が表示されています（拡大画像）。 「FORGE」の家には、中央に黒い矢印が付いた白と青のマーカーがあることに注意してください。 「賃貸」住宅も同様です。これらのマーカーはそれぞれ、インタラクティブなボタンとして機能します。予想されるインタラクション動作は次のとおりです: ホバーすると、青い背景が拡大して「Forge」または「Rentals」というテキストが表示されます。クリックすると、ユーザーは適切な「Forge」または「Rentals」ページに移動します。また、画面のサイズが変更されたときに応答するようにしたい、

P粉896751037 2023-09-08 21:25:41 0  1  810

JavaScript - この JS の使い方は?

{code...} この画像を htm ファイルで使用したいです。クリックして js を拡大し、このコードを htm で直接使用します。{code...} これを一緒に使用するにはどうすればよいですか? 上記のコードを直接使用しますhtm 内で This js を呼び出します

習慣沉默 2017-05-19 10:47:33 0  1  672

css - float 要素が落ちる問題を解決する方法

この効果を実現したいのですが、現在のコードは次のようなものです {code...} {code...} を変更した後、それを解決する方法を知りたいです。幅を縮小するには、div の背景画像が表示されます。写真を比例的に拡大縮小する方法はありますか?

怪我咯 2017-05-16 13:36:42 0  7  1213

変換された要素がオーバーフローして自動的に切り取られるのを防ぐにはどうすればよいですか?

Bootstrap4 を使用して、友人の個人 Web サイト用のモーダル ギャラリーを作成しています。ホバーすると画像が拡大するように設定しましたが、オーバーフローを自動に設定すると、モーダル（または div）の端で画像が切り取られてしまいます。ギャラリーも一連のタブの 3 番目ですが、どれもうまく機能します。どの div に overflow-auto クラスがあるかを変更しようとしました。すべて異なるタグを付けようとしましたが、何を試しても、ギャラリーがスクロールし、画像がスクロールするようにする方法がわかりません。ホバーカット時にぼやけません。関連するコード: .g

P粉242535777 2023-09-07 20:04:02 0  1  567

CSSグリッドを使用して画像を配置するにはどうすればよいですか?

CSSグリッドを使用してWebサイトの一部を構築しようとしています。リストと画像を同じ行に維持し、画面サイズが変更されたときに縮小/拡大するようにしようとしています。コードは以下に貼り付けられます。ご協力をよろしくお願いいたします。エラーがグリッド テンプレート内にあるのかどうか疑問に思っています。 .pm{表示:インライングリッド;最大幅:100%;位置:相対;マージン:自動;グリッドテンプレートエリア:"タイトルタイトル"

P粉463824410 2024-04-01 22:08:31 0  1  444

onclick() 関数による画像の変更

オブジェクトをクリックすると、ある写真を別の写真に変更したいと考えています。コードは次の順序でスタックされます。 私が望むのは、クリックすると、画像が色付きの画像、つまり別の画像に置き換えられることです。これで、JQuery/JS を使用して実行できることがわかりました。しかし、このような単純な機能を実現するために大量の JS コードを追加したくありません。これを達成するより簡単な方法はありますか? pseudo-selector.activeクラスのようなメソッド？分かりません。

P粉242535777 2023-08-18 08:53:28 0  1  474

Vuetify を使用してモバイル画面上で表を全幅に表示できますか?

Vue2 と Vuetify を使用して、小さな画面でテーブルの「縮小」を実現できますか?表をモバイル画面上で全幅のままにし、拡大できるようにする必要があるという課題があります。基本的に img のような動作を実現します。基本的には、v-data-table を使用して、この画像から 2 番目の画面を実装する必要があります。 「どちらも同じように悪い」としても、2 番目の解決策が必要です。 Vuetify 専用のソリューションはありますか?

P粉842215006 2023-08-30 20:56:28 0  1  614

javascript - これがローカルでは機能するのにサーバーでは機能しないのはなぜですか?

ローカルで HTML ファイルを作成し、次の 2 つのコードを挿入したところ、正常に実行されましたが、サーバー上では動作しないのはなぜですか?その理由は何ですか?通常、画像をローカルで拡大および縮小してサーバー上で実行できますが、クリックしても効果がありません。 {コード...} {コード...}

ringa_lee 2017-05-19 10:47:15 0  2  895