2017-03-01 3 views
0

私はある種の効果を得たいと思うイメージがあります。基本的に、ブラウザのウィンドウを小さくすると、画像のサイズが変更されず、常に中央が表示されるように、左右を均等に切り捨てたいのです。ページ外に大きな余白があります

私が成し遂げてきたこと、次のように:

<style> 
    .banner{ 
     text-align: center; 
     overflow: hidden; 
     height: 350px; 
     position: relative; 
    } 

    .banner img{ 
     position: relative; 
     left: 300%; 
     margin-left: -600%; 
    } 
</style> 

<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div> 

のJSフィドル:https://jsfiddle.net/szsj6f9m/私はこのアプローチに気づいた

ことの一つは、私が行った場合、左100%とマージン左であることです-200%の画像は、その後半分右にスライドし始めます。私は完全になぜ理解していない、私はちょうど私が300%に320%の画面上で正しく動作するようにパーセントを作る必要があることを知っている。ここで

は、私はちょうど大に小さなブラウザのサイズを変更すると、あなたは私が何を言っているかが表示されます、について話しています何の例です:

のJSフィドル:https://jsfiddle.net/szsj6f9m/1/

私の質問はこれです:

これまで画面の位置を持ち、その上に大きな左端を置いても問題ありませんか?これは、小さなデバイスやデバイス上のパフォーマンスの観点から、あらゆる種類の問題を引き起こしますか?あなたがこれをしないと言っていいと思う理由がありますか?

答えて

0

私は個人的にIE9のためにとまでサポートされるだろうleft:50%;transform:translate(-50%,0);(でも垂直センタリングのために働く)top:50%;transform:translate(0,-50%);https://jsfiddle.net/szsj6f9m/3/

+0

を使用し、私は私のバージョンは、以前にもよりブラウザのためであると考えています。しかし、これは素晴らしいアプローチでもあります。 – Bojan

+0

@Bagzliは正直言って...古風なブラウザを気にしないでください...それは開発者とクライアントの両方のための地獄への道です。 : - 誰かが私が取り組んでいる大きなプロジェクトのウェブサイトにアクセスすると、私はちょうどスクリーンショット(ぼやけた)としてレンダリングされた背景を持つオーバーレイポップアップをトリガーし、誰ものためにブラウザをアップグレードするよう強制します。 –

+0

私はリダイレクトをオンにしていますが、私はこのコードを他の誰かのために書いています。私はそれらのオプションを開いて、その決定を自分自身で行いたいと思っています。 – Bojan

関連する問題