Focal Pointは、GitHubでAdam Bradleyによって導入されたHTML / CSSフレームワークです。 レスポンシブ画像を操作する最も簡単な方法の1つは、画面に収まらない辺をトリミングすることです。 ただし、使用可能な画像スペースを誤ってトリミングする可能性があります。 焦点を使用して、トリミングされない画像の重要な焦点を指定できます。
操作の原理は非常に簡単です。画像全体が12x12の割合で特別なグリッドで分割されます。
ここで、即興座標を使用して画像上の焦点を選択する必要があります。 これは通常、写真の顔です。 グリッドの中心から数える必要があります。上記の例では、面は中心の3セル上および3セル右にあります。
コードに移りましょう。 マークアップは非常に単純で、焦点と焦点の座標はブロッククラスで示されます。 フレームワークの欠点は、画像を2つのdivで囲む必要があることです。
<div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div>
結果は、適応画像の美しく正確なスケーリングです。
以下に、このような適応画像の2つのライブ例を示します。 結果として得られるマークアップは面倒ではありません、HTML：
<div class="column"> <h1>Focal Point</h1> <p>Lorem ipsum...</p> <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt="guy"></div> </div> </div> <div class="column"> <h1>Focal Point</h1> <p>Lorem ipsum...</p> <div class="focal-point right-2 up-2"> <div><img src="couple.jpg" alt="couple"></div> </div> </div>
CSS：
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .column { float: left; overflow: auto; padding: 20px; width: 50%; } h1 { text-transform: uppercase; font: bold 45px/1.5 Helvetica, Verdana, sans-serif; } p { margin-bottom: 20px; color: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; } @media all and (max-width: 767px) { p { font-size: 12px; } h1 { font-size: 35px; } } @media all and (max-width: 550px) { h1 { font-size: 23px; } }
ブラウザー間の互換性に関しては、この方法はIE8を含むすべての最新ブラウザーで機能します。 フレームワークの原理をより深く見ると、すべてが非常に単純であることがわかります。フォーカスポイントの座標のすべてのクラスは、メディアクエリを使用してCSSに登録されます。
@media all and (max-width: 767px) { /* 4x3 Landscape Shape (Default) */ .focal-point div { margin: -3em -4em; } /* Landscape up (Total 6em) */ .up-3 div { margin-top: -1.5em; margin-bottom: -4.5em; } .right-3 div { margin-left: -6em; margin-right: -2em; } }
したがって、サイトでスケーリングする必要がある画像の数が少ない場合、CSSの適切な部分を使用するだけで、Focal Pointフレームワーク全体を使用する必要はありません。
DesignShack Webサイトの例。