問題タブ [responsive-images]

現在、私のウェブサイトは、そこにある完全な画像が読み込まれ、画面に合わせて自動的にサイズ変更されるように設定されています。これは、CSS で画像の幅を 100% に設定することによって行われます。うまく機能しますが、画像タグ自体で幅と高さを指定していないため、標準に準拠していないようです。

私のアイデアは、同じ Web ページの複数のバージョンを作成することです。唯一の違いは画像のサイズです。各画像には独自のファイル名があります (image1small.jpg、image1medium.jpg など)。

問題は、ほとんどの人がすぐに全体像を見たいと思うことですが、画面が小さい人は全体を見るために水平方向にスクロールする必要があるため、これはうまくいきません。

画面の基準を満たさないユーザーをより適切なサイズの画像のページにリダイレクトする JavaScript を上部に配置することを考えていました。このようなもの：

問題は、ページの画面解像度要件を満たしていないユーザーに対してページ リダイレクトが発生することです。これが Google への不正なリダイレクトと見なされるかどうかはわかりません。

上記のようなコードを使用して、互換性のない画面サイズのユーザーを正しいページにリダイレクトすることは良い習慣ですか? または、正しいサイズの画像をユーザーに表示するために別のアプローチを取る必要がありますか?

そして、誰が答えようと、画像タグの幅と高さの属性を指定する必要があると感じています。HTML 4.01 の厳格な標準に固執して、ページが誰にとっても機能するようにしたいと考えています。

OK これは事実です: ビューポートのサイズが 800px 以上の場合、ビューポートの 50% に画像を表示したいのですが、それ以外の場合は画像が 100% であるため、html は次のようになります:-

または、css を使用して次のことを行うこともできます:-

したがって、画像自体ではなく画像コンテナーを制御できます。ここでの私の質問は、サイズ属性が最良の解決策と見なされるという条件があるということですか?

注意:- 最初の例では、コンテナの幅ではなく、ビューポートの幅に基づいて画像サイズが計算されることを知っています

http://dfwcgi.com/approach/white-papers ライブ サイトですが、事前に IE でトラブルシューティングを行うことを怠っていました。すべての記事の画像 ([画像とリンク] タブ経由) は IE11 に対応していません。記事の本文の画像は準拠しており、レスポンシブです。この "auto \9" をさまざまなフォーラムで見たことがありますが、実際には解決策が見つかりません。カスタム CSS を数回変更しましたが、結果はありません。それはロケットのテーマです。IE11 のカスタム CSS ページも作成しましたが、うまくいきませんでした。

ご意見をいただければ幸いです。これは私を夢中にさせています。

前もって感謝します！

実際の画像のように動作するが存在しない html の空の画像を偽造することは可能ですか?

たとえば、200x150px の画像である必要があるレスポンシブ列があります (レスポンシブであるwidth: 100%; height: auto;ため、スタイルが設定されます)。持ってる。

次のようなイメージタグを試してみましたが、それが原因で機能しませんheight: auto。その奇妙な src については、これを見てください。

PHPで空のpngを生成することは可能でしょうか?

編集: サービスplacehold.itについて言及した人もいます。基本的に、それはまさに私が必要とするものです (ほとんどの場合、絶対に十分です) が、これは WordPress プラグイン用であるため、インターネット接続なしでローカルでも実行する必要があります。外部サービスを使用しないソリューションが最適です。

レスポンシブでなければならないモバイル電子メール テンプレート (javascript がないことを意味します) を作成しています。

画面が狭くなるにつれて縮小されるいくつかの画像をインラインで配置したい。css table と table-cell を使用してこれを行い、画像を拡大縮小しました。今のところ問題ありません。

ただし、画像は電子メール クライアントによってブロックされることが多いため、画像が読み込まれていないときに画像の「代替テキスト」を表示する、一種の灰色のプレースホルダーを作成するように依頼されました。このプレースホルダーを、含まれている画像と同じサイズにし、幅を狭くして拡大縮小したいと考えています。

次のフィドルでわかるように、私はかなり遠くまで行きました: http://jsfiddle.net/ow7c5uLh/29/

HTML:

CSS:

ただし、次の 2 つの問題があります。

1. 画面が狭くなり、画像がスケーリングされると、背景色が画像の下から飛び出します。placeholder-div は画像と同じようにスケーリングされますが、その高さは (ブラウザーによって) 画像の高さよりも 5 ピクセル大きくなるように計算されます。その違いはどこから来るのですか？
2. 画像がロードされていない場合 (画像の URL を無効にしてフィドルを試してください)、placeholder-div の高さが崩れます。正しい高さを保つにはどうすればよいですか？

参考までに、実際に使用される画像は常に同じサイズであるとは限りませんが、サイズがわかり、縦横比を計算できます。これらの値 (120px など) を、例のように個別の css ファイルではなく、インラインで書き込みます。

助けてくれてありがとう！

現在の画像を編集するために CamanJs (画像操作ツール) を使用しています。http: //v2-demos.jcrop.org/demos/camanjs.htmlこのソースに従って、jCrop をトリミング目的で CamanJs と統合しました 。正常に動作していますが、問題は固定幅の画像で動作していることです。しかし、レスポンシブ画像でこれを行う必要があります。ここにライブ URL があります: http://128.199.175.24/editimg/crate-editor-popup.html そしてここにスクリプトがあります: http://128.199.175.24/editimg/js/corpCaman.js

CamanJs はリモート ドメインからの画像をサポートしていないと思うので、jsfiddle を作成できませんでした。

また、画像を操作するためのより優れた jquery ツール (クロップ、明るさ、色相、ぼかしなど) が他にある場合は、その提案をお願いします。

ありがとう

私はレスポンシブ デザインに取り組んでおり、画像のコードをそのように作成しました。Chrome、Firefox、および Safari で見栄えがします。

ただし、古い Android ブラウザ v2.3.4 では動作せず、画像が途切れます。古いブラウザーの画像をレスポンシブにするためのルールやコツはありますか? 誰の助けにも感謝します！

私は単純なフォームを持っており、php を使用して画像の場所のみを保存しているデータベースに画像をアップロードしています (たとえば、img/example.png")。

私の問題は、レスポンシブサムネイルを作成する方法、または画質を損なわないように画像を表示する方法です。

皆さんが私に指示できるガイドライン、方法、またはベストプラクティスの種類はありますか.

どうもありがとう。