背景の位置、3番目の画像のルール、モバイルのデザイン

Question

私は、画像の焦点に合わせて3分の1に調整された画像と、画像をページに入れるためにbackground-imageに取り組んでいます。

ユーザーがタブレット（またはそれ以上）のデバイスにいる場合、私はbackground-position:50%;を使用しています。私は写真が横に並んでいることに気にしない。

しかし、モバイルデバイスでは、（JSBinの例を参照してください）右の3行目にあるテーマを画面上で水平に配置したいと思います。私はbackground-position:75% 50%のような異なるパーセンテージを使用することができることを知っていますが、デバイスの幅が変わると、75％はもはや「中心」にはなりません。

何百ものメディアクエリを書くことなく、いつも中心に置いて、background-positionを常にモバイル上のイメージの中心になるように動かせるようにする方法はありますか？

ここには私が見ているもののJSBinがあります。

いくつかの仮定：

• 写真は常に
• 写真は常に同じ物理的寸法を持つことになりますルールの三分の二に整列されます
に垂直配向について+
• 心配していないIE9で
• 作業

Answer 1

768pxより小さい場合：

background-position: -50vw; 

このケースでは、カバーの代わりにバックグラウンドサイズを150％に設定する必要があります。