2011-11-24

[CSS] ディスプレイの解像度に合わせて画像の位置を調整

ブラウザいっぱいに画像を表示させるようなサイトで、
横幅はブラウザの幅いっぱいにしたいのですが、
縦幅は固定でオーバーフローを非表示させるような形にし、
さらにその画像をフェード切り替えするようなものを作っていたのですが、
縦位置のセンタリングがどうしてもうまくできず、、
しょうがないので、CSSで調整してみました。



@media screen and (max-width: 1024px) {
ul#photo li img { margin-top:-10px; }
}

@media screen and (min-width: 1024px) and (max-width: 1100px) {
ul#photo li img { margin-top:-70px; }
}

@media screen and (min-width: 1100px) and (max-width: 1280px) {
ul#photo li img { margin-top:-120px; }
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
ul#photo li img { margin-top:-200px; }
}

@media screen and (min-width: 1366px) and (max-width: 1440px) {
ul#photo li img { margin-top:-250px; }
}

@media screen and (min-width: 1440px) and (max-width: 1680px) {
ul#photo li img { margin-top:-300px; }
}

@media screen and (min-width: 1680px) and (max-width: 1920px) {
ul#photo li img { margin-top:-350px; }
}

@media screen and (min-width: 1920px) {
ul#photo li img { margin-top:-400px; }
}


縦位置のセンタリングというのは本当に何かと面倒ですね。。

Comment:

Trackback URL: