問題タブ [responsive-images]

ハイブリッド アプリを構築しようとしていますが、背景の特定の部分のサイズを取得する必要があります。

• 背景には次のプロパティがあります。 background-size: 100% 100%; background: url('back.jpg') no-repeat center center fixed;
• その背景の上に div を配置し、div のサイズを背景の正確な部分のサイズに設定したいと思います。

これが私がやりたいことを明確にするための画像です: 赤い四角形の背景の例

上の背景画像の赤い四角形は、レスポンシブ画面でサイズを計算したい画像の部分の例です。

このトピックPosition element over background imageのおかげで、要素を背景の正しい絶対位置に合わせる方法を知っていますが、正しいスケールにサイズを変更する方法はわかりません。

誰でも助けることができますか？

Jekyll Responsive Image プラグインsrcsetを使用して、投稿の画像に/sizes属性を持つ適切なレスポンシブ画像を生成したいと考えています。

しかし、画像の標準的な Markdown 構文しか理解できないMacDownのようなライブ プレビューを提供するソフトウェアで投稿を編集できるようにしたいとも考えています。

そのため、Jekyll に画像の標準的な Markdown 構文を変換するように指示する方法 (ある種のプラグイン) があるかどうかを知りたいのですが、それを Markdown ファイルに入れます...</p>

![alt text](path/to/image.jpg)

… Jekyll Responsive Image プラグインに固有のこの構文に:

{% responsive_image path: path/to/image.jpg alt: "alt text" %}

その後、Jekyll は引き続き Kramdown を使用して HTML を生成できます…</p>

プラグインの Githubにも問題を作成しましたが、より一般的な回答も適切であり、他のニーズにも役立つ可能性があります。

こんにちは、私は自分の Web サイトを再設計しています。私は JS と CSS の初心者で、HTML 5 はかなり得意です。Lightbox を使用した画像のギャラリー ページを備えた新しいレスポンシブ Web サイトに取り組んでいます。

ベータ サイトとギャラリー ページはこちら: http://www.sound-enclosures.com/FanAir/index-3.html

サムネイルへの「 img src= 」へのリンクと、BIG イメージへの「 a href= 」へのリンクがあります。

問題は、4 つのイメージのロードのうちの 1 つだけです。The Blue Picture ページの最初の画像です。これは正しく動作しているようです。他の画像はリンクしようとしますが、読み込み中にハングアップします。ファイル名、場所、URL などを確認しました。

Lightbox.min を使用しています。「/head」の前のスクリプトと「/body」の前の私のページの下部にあるbootstrap.min.js

私が使用しているモンスター テンプレートには jQuery v1.11.1 が付属していました。Stackoverflow フォーラムで、JQuery 1.8 は Lightbox でより適切に機能するようだと読みましたが、試したことはありません。他のページが台無しになる可能性があるため、試したことがありません。 .

誰でも見て、おそらくいくつかの支援、ガイダンスを提供できますか?

よろしくお願いします。

スコッティ

これは私が現在取り組んでいるサイトです: http://perlaparra.com/rnr/site/

幅を 100% に設定しましたが、まだ全幅で表示されません。私が得ることができる助けに感謝します。

ありがとうございました！P :)

レスポンシブ サイトでモバイルとデスクトップのどちらに提供する画像アセットを決定するためのベスト プラクティスは何ですか? 望ましい結果は、大きな高解像度の画像をデスクトップ ユーザーに提供し、小さな画像をモバイル ユーザーに提供することです。

レスポンシブ Web サイトのデザインを開発しました。これがsecondgfです。私の投稿の 1 つで、すべての画像を中央に配置しました。デスクトップでは正しく機能しており、すべての画像が中央に正しく配置されているように見えますが、モバイル デバイスで開くと、すべての画像が右に配置されます。私の以前に書いた投稿にも画像が中央に配置されており、モバイルとデスクトップの両方で完璧に機能します。これは作業中のpost-secondgf.com です。投稿の何が問題なのかを突き止めようとしましたが、うまくいきませんでした。これは、ブロガーでホストされています。

Bootstrap 3.3.5 で構築した私の Web サイトには、レスポンシブにしたい画像が含まれているため、それらに .img-responsive クラスを割り当てました。ただし、Firefox では応答しません (ウィンドウのサイズを小さくしても、画像が小さくならないため、スクロール バーが表示されます)。Internet Explorer では問題なく動作します。「幅：100％;」を追加することで修正できるバグについて読んだ他のブラウザは試していません。しかし、それで問題は解決しません（ウィンドウを小さくすると、画像が大きくなり、それを含む列がその行の唯一の列になるだけです。作成を続けると、再び小さくなりますウィンドウは小さくなりましたが、画面を大きくしたいサイズになると、再びスクロールバーが表示されます.htmlタグに「width: 100%;」をインラインで追加してみました. CSSに追加してみました。「display:block;」も追加してみました "最大幅: 100%;" および「高さ: 自動;」も同様ですが、それは何も変わりませんでした。!important を追加しても役に立ちませんでした。他に何を試せばいいのかわからない！

画像のコードは次のとおりです（行のこの列のみ）：

そしてCSS：

私に何ができる？

アップデート：

メディアクエリ:

こんにちは、レスポンシブ svg をアイコンとして使用するページがあります。js.fiddle は次のとおりです。

https://jsfiddle.net/4yp65vu0/

次の CSS に注意してください。

そしてHTML：

SVG アイコンと周囲のコンテナの周りに赤い枠線を付けました。それらが反応するようにするために、パディングボトムがプロポーション比トリックに等しい相対div内にそれらを絶対に配置しました。ただし、svg_contatiner2 は列幅全体を埋めます。svg アイコンをぴったりと合わせて、大量のスペースなしでテキストを膨らませたいだけです。