比較的横幅の広い、中央寄せしている画像をサイトに掲載している場合、ホイールスクロールなどでサイトを拡大していくと、画像の幅が画面からはみだしたところで、画像が左端が画面の左端に合った状態で拡大されてしまう。
したがって、PCモニタの解像度によっては、デフォルト縮尺の状態でも、画像が中央から右にずれたような表示となってしまう。
この場合は、leftプロパティとネガティブマージンで対応する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div.box { overflow:hidden; width:1370px; height:300px; /* ↓ここ */ left: 50%; margin-left: -685px; /* ↑ここ */ } div.box img { width:1370px; height:300px; } |
（imgがブロック要素であればimgの方に指定してもよろしいかと思う。）
動作確認ブラウザ
- chrome 61.0.3163.100
- Firefox 56.0.1(64bit) 他
参考サイト）