[WordPress] ワードプレスのビューポートのサイズに合わせて画像のさまざまなサイズを提供する方法ですか?

スポンサーリンク

Question

は、プロシージャの以下の理解のため、非常に基本的な質問がありますが何を信じて ない質問は重要です

ワードプレスの 4 つの既定のサイズがある:

  • (、それはどこにでも) オリジナル-いいえ作物
  • 大 – 通常 1024 × 1024
  • 中 – 通常 300 × 300
  • サムネイル – 通常 150 × 150 – ハード トリミング

と私たちすることができます編集/無効にしたり、元を除くすべての既定のサイズを追加、編集、削除することができます任意のカスタム サイズもワイド スクリーン デバイス用のカスタム スクリプトを使用して 2 x サポートを有効にできます。しかし、それはどこで私の理解を停止 – 私たちイメージを持っている私たち希望のサイズで今何ですか?どのようにすることができます我々 ショー/配信 ‘ 日ビューポートのサイズによると?

、コードがセクションをしたと仮定します:

'alignleft' ) ); ?>

そこではなく、サムネール) 画像の (広い) バージョン x 2 をスローする場合、どのように行うことができます私はこれですか?

と JS を設計するための Javascript の助けを借りずに PHP を使用してビューポートのサイズを認識できないためその質問を求めていますです追加 – 必須ではありません。もし我々 は、我々 は、JS を使用せず、ビューポートのサイズに従って画像をスローするように持っている、どのようにそれを行う可能性と思う?それは何が実際に私に痛みを与えている

答え

js ファイルなしの 1 つだけのソリューションを考えることし、悪いものです。すべての画像を読み込むことができるし、メディア クエリを 1 つだけを表示する CSS を使ってします。あなたのサイトは巨大になり遅いが JS を使用できない場合、これは考えることができます唯一のオプションです

PHP get_browser ( http://php.net/manual/en/function.get-browser.php) を使用して、クライアント ウィンドウのサイズに生の推定のいくつかの種類を行う可能性があります。しかし、それは推定。

Corect src と src を空にアルのイメージ データの HTML 属性と JS を使用してかを判断して、適切なサイズ交換以前出力する勧めソリューション

要素の画像の例:


JS 関数の例:

var image = getElementById( your-img-ID ); //or some other selector
var selectedSrc = "data-full-src";
image.setAttribute('src', image.getAttribute(selectedSrc) );

http://stackoverflow.com/questions/27224422/how-to-provide-different-sizes-of-images-according-to-viewport-size-in-wordpress

スポンサーリンク

Leave a Reply