表示サイズに基づいてイメージの異なる部分を表示する応答ヘッダ

Question

したがって、自分のサイトのヘッダーイメージを作成します。私はそれが反応的であることを望んでおり、私は「モバイルファースト」アプローチを採用しています。私は写真を持っており、タイトルが示唆するように、それはデバイスの表示サイズに基づいて異なる表示をしたいが、それでも同じ画像ファイルでなければならない。たとえば、モバイルでは画像の一部しか表示されませんが、特定の幅になるとすぐにフルサイズに変更されます。このサイトhttp://adopciaki.plは、私が欲しいものを正確に持っています。レイアウトを複製しようとしましたが、無駄にしました。手伝ってくれてありがとう！

Answer 1

そこには、これを達成するには、いくつかの可能性のは、例えば、携帯電話上で、だ： IMG { 位置：相対 幅：自動; 高さ：100％; 左：50％; トランスフォーム：translateX（-50％）; }

この

Answer 2

...、画像は中央位置ラッパー要素をそのように100％の幅と高さの自動設定とすることができる錠剤またはデスクトップ上次いで

隠しオーバーフローを与えます

一つの解決策は、画像のSVGのコピーを使用して、画面サイズに基づいてサイズにCSSメディアクエリを使用することです - あなたはあなたの閲覧をすることによって画像を半分のサイズに縮小表示されます

@media (min-width: 1200px) { 
    img { 
    width: 300px; height: 300px; 
    } 
} 

@media (max-width: 600px) { 
    img { 
    width: 150px; height: 150px; 
    } 
} 

https://jsfiddle.net/rkr9psbf/1/ rウィンドウは小さくなる。お役に立てれば！