サイズ変更時に画像にテキストを含める

画像内に段落を含めたいのですが、いつもオーバーフローしてしまいます。画像のサイズを段落と同じ長さになるように変更したいと考えています。 min-height を使用してみましたが、機能しません。 .image-container{position:relative;min-height:100vh;width:100%;justify-content:center;align-items:center;display:flex;}.truck-image{position:

P粉458913655 2024-03-20 11:25:39 0  1  434

TailwindCSS を使用して画像を連続して同じサイズに設定できません

TailwindCSS を使用してページのデザインを作成しています。コンポーネントと画像を同じサイズに設定できません。フレックス、ラップ、divまたは画像の幅の変更をいくつか組み合わせてみましたが、解決策が見つかりません。私が望む結果は、各ムービーに、次の名前の同じサイズの画像を含む同じサイズの長方形が含まれることです。また、オーバーフローについては、Y スケールではなく、X スケールでスクロールできるようにしたいと考えています。なんとかできましたが、それを維持する必要があり、適切なサイズも必要です。画像を次のように表示したい:(htt

P粉978742405 2024-02-17 12:27:00 0  1  422

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

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

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

コンテンツを中央に配置し、画像リンクをクリックできるようにするのにサポートが必要です

基本的に、画像とタイトルを画面の中央に配置する必要がありますが、画像をクリックしてリンクを開くことも必要です。これを行うための正しいコードがあると信じていますが、これら 2 つの問題がまだ発生しています。画像のサイズも2種類あるので、それも難しいです。赤い錠剤を小さくし、青い錠剤を（元のサイズと比較して）大きくしてみました。他の 3 つの画像の背景キーフレームについては心配しないでください。タイトルと赤と青の錠剤の画像を中央に配置するのに助けが必要です。オンラインコードを使用してみましたが、同じエラーが発生しました。画像のサイズをさまざまなサイズに変更してみました、試してみました

P粉794851975 2023-09-13 12:12:49 0  1  655

CSS ドロップ キャップ画像、空白に配置されたテキスト

これは日常的にドロップキャップが発生する状況ではないと思います。私の大文字の「S」は次のようなイメージです。実際のイメージは上の列まで伸びていることに注意してください。上部のバーは同じ画像の一部であり、大きな S と S の左側の図が含まれています。ここではわかりやすいように背景を青にしていますが、本来の色は白です。 (ただし、最上部の余分な灰色の領域は無視してください。スクリーン キャプチャを行うときに厄介です。) トップ バーと画像を台無しにしたくありません。私に提供された画像は次のようになります。右上隅にトップバーが描かれ、トップバーの下に空白がある長方形の領域です。テキストはこんな感じ...

P粉415632319 2023-09-05 21:42:04 0  2  557

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

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

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

ブラウザのビューポートサイズを取得する方法

訪問者に高品質の画像を表示させたいのですが、ウィンドウ サイズを検出する方法はありますか?それとも、JavaScript を使用したブラウザのビューポート サイズでしょうか?ここの緑色のエリアを参照してください。

P粉237029457 2023-08-28 11:06:30 0  2  601

画像の開始点と終了点

画像の開始点と終了点を設定しようとしています。それで、キャンバスと画像があり、画像をキャンバスに配置すると、開始点/終了点の上にマウスを置いたときに小さな赤い円が点灯するようにしたいのですが、これは他の画像を接続して作成できることを意味します。例: 1) 画像をドラッグします。 2) 画像をキャンバスに配置します。 3) マウスを開始点/終了点に移動すると、小さな赤い点が点灯します。ご覧のとおり、赤い点はホバー時にのみ表示されます。もう 1 つの質問ですが、最初の質問を解決できれば、画像がグリル (正方形) に従っていません。これは html/js のコンストレジスタの例です。

P粉511757848 2023-08-31 12:24:51 0  1  561

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

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

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

PHP は画像のみから方向 exif を削除します (imagick は使用しません)

アップロードされた画像をローカルで一括してサイズ変更し、サムネイルを作成するスクリプトを作成しました。問題は、一部の画像が垂直方向に配置されているが、サイズ変更後に水平方向に回転する場合です。これは画像の exif の向きが原因です。 PHP 経由で画像から方向 exif を削除する簡単な方法はありますか? Imagick ができることは知っていますが、インストールできない/したくないのです。それなしで解決策はありますか？現在、このような画像を画像エディタで開き、exif情報を保持せずに再保存することで、この問題を解決しています。その後、私がいたとき、

P粉141925181 2024-03-27 09:27:01 0  1  450

画像を変換およびフィルタリングするとオーバーレイが生成されます

画像にホバーすると画像のサイズが大きくなり、ホバーした画像が他の画像によって切り取られないコードを見つけました：tutorialsrepublic.com しかし、次のコードも入力すると： img{transition:filter.5sease-in -out ;-webkit-filter:grayscale(100%);filter:grayscale(100%);}img:hover{-webkit-filter:grayscale(0%);filter:gr

P粉276876663 2023-09-15 20:58:43 0  1  1018

Laravel 5.8でアップロードする前に画像のサイズを変更する

LaravelのAPI経由で画像をアップロードするこの関数があります：privatefunctionhandleImage($image){$exploded=explode(',',$image);$decoded=base64_decode($exploded[1]);if(Str::contains ( $exploded[0],'jpeg')){$extension='jpg';}else{$extensio

P粉608647033 2023-09-04 12:56:10 0  1  573

固定画像サイズを維持しながらレスポンシブ デザインを実現するにはどうすればよいでしょうか?

画像を引き伸ばさずに 16:9 コンテナに収まるように画像のサイズを変更するには、次の CSS (ブートストラップを使用) を使用します。

P粉739706089 2023-08-16 14:35:27 0  1  441

写真内の画像のアスペクト比

次のようなタイトルの画像があります。 タイトル CSS には img{max-width:100%} もあります。画像の幅と高さを同時に設定し、幅が設定値を下回った場合でもそのアスペクト比を維持したいと考えています。それで、私は次のようなコードを試しました： タイトル これはほぼ私が望むものですが、画像が「レターボックス化」されている場合、タイトルは画像の下部からかなり離れています。タイトルを画像の下部にぴったりと合わせたまま、希望の結果を得る方法はありますか?

P粉557957970 2023-08-17 20:24:04 0  1  488

JavaScript - Zhihu の画像読み込みはどのように実装されていますか?

Zhihu ドキュメントを参照してください。Visual Studio Code を評価するにはどうすればよいですか?このページには面白い機能があり、画像を読み込む前に白いキャンバスが表示され、次にガウスぼかしのような画像が表示され、最後に鮮明な画像が表示されます。実装されていますか? それとも...

大家讲道理 2017-06-26 10:58:20 0  1  751

画像などの <use> 要素を使用して SVG アイコンのサイズを変更する方法

私の HTML ドキュメントには、icon-x などの id 属性を持つ多くの項目が含まれるドキュメントがあります。次に、これらのアイコンを <divclass=container><svg><usexlink:href=#icon-x/></svg></div> のように再利用したいと思います。ただし、この例のアイコンはソース SVG では異なるアイコンである可能性があります。サイズ。コンテナ内の SVG ではなく div.container に収まるようにしたい

P粉184747536 2023-09-15 21:09:43 0  1  921

Bootstrap Vue を使用して画像を右揃えにする方法

私は BootstrapVue を初めて使用し、b-cardheader を使用して画像を右に揃えようとしています。 <span> または <div> を使用してみました。テンプレートのタイトル サイズは、画像を追加するまでは完璧でしたが、画像は少し右に表示されましたが、少し下にも表示されました。これが私のコードペンリンクです。ご協力いただければ幸いです。 https://codepen.io/tone373/pen/JjeYazG<b-cardheader-

P粉216807924 2023-09-07 23:33:56 0  1  609

背景が丸いテキストを画像にオーバーレイする方法

この画像に表示されているものを HTML で複製する必要があります。問題は、テキストが div と背景画像を覆っていることです。外側の div に画像がなく単色もない場合は、角が丸い小さな HTML 要素を適切な場所に配置すれば、これをかなり簡単に実行できると想像できますが、背景画像によってさらに複雑になります。これまでのところ、私はこれを持っています...ご覧のとおり、2つの丸い角で立ち往生しています。誰かが解決策を提案できますか?すべての最新ブラウザで動作する必要があることに注意してください: #outer{width:100%;hei

P粉328911308 2023-08-30 15:20:14 0  1  480

レイアウトの変更を防ぐために、可変サイズの画像をロードする前にそのスペースを予約するにはどうすればよいですか?

テキスト、画像タグ、および次のようなテキストを含む HTML ページがあります。これは画像の前のテキストです。 <imgsrc="image.jpeg"/>これは画像の後のテキストです。画像の読み込みに時間がかかるため、ページが読み込まれるとき、画像よりも先にテキストが読み込まれるようになりました。そのため、画像の後のテキストが画像の前のテキストの直後に配置されるようにレイアウトが変更され、画像がまだ読み込まれていない場合、画像用のスペースは確保されません。ただし、画像を読み込むと、画像の後のテキストが下に移動します。

P粉936509635 2023-08-28 00:04:44 0  1  600