応答のない画像をオフセンターポイントに切り出す

Question

私は実際にフロントエンドの開発者ではありませんが、応答性の高いWebアプリケーションのためにCSSを実行するように求められています。私は、ほとんどの場合、getBootstrapとstackOverflowを使ってすべてをまとめることができましたが、解決策を見つけることができなかったという1つの問題が発生しました。

このデザインでは、ホームページの上部全体に応答するフル幅の背景イメージが必要です。ページが狭くなると固定高さが切り取られます。 自体は問題ありませんが、このイメージはそうのように、ややオフセンター位置にトリミングするために、同じページの呼び出しのためのより小さなサイズの設計：

たくさんありますページの左側にイメージをロックし、右側から切り抜くか、イメージを中心にして両側から均等に切り抜く方法についてのコードサンプルを公開していますが、私の人生では、左から約33％、右から66％の画像が得られます。

信頼性の高い方法がありますか、賢明な回避策がありますか？

Answer 1

background-size: coverと組み合わせたbackground-positionプロパティです。

background-size: coverは、画像を拡大して空き領域を埋めるようにブラウザに指示し、画像の余分な部分をボックス外で切り取るように指示します。

<div>の幅と高さが200px、画像の幅が1000px、幅が500px、高さが200px、幅が400pxに縮小されているとします。

次の質問は、画像のどの部分を表示するか、どの部分を表示しないかを選択する方法です。それでbackground-positionが入ります。

これは、垂直と水平の両方を中心とし、しばしば望ましい結果であるbackground-position: center center;のような単純なものとして設定できます。しかしあなたの状況では、このようなものを使用したい：コンテナ（例えば<div>）よりも幅があるときこれがあなたのイメージは、大画面を中心とした作りとなります

background-position: center left 33%;

を、それはそれを移動します必要があります左から33％に集中する。

HTML：：

<div class="hero"></div> 

CSS：理にかなっている

.hero { 
    height: 500px; 
    background-image: url("[your-image-url]"); 
    background-size: cover; 
    background-position: center left 33%; 
    background-repeat: no-repeat; 
} 

・ホープここ

---

は完全な例です。 Here's a codepen showing it in action.