http://www.flywavez.com、臨時のページで作業しているのですが、画像のサイズを変更して、すべての画面解像度で同じにすることができません。iPhoneでは、腰の前で女の子がカットされ、私の19"のラップトップ画面で1366 x 768の解像度で見たときは完全にフィットし、ラップトップからVGA経由で私の55"のテレビにビデオを供給したときでもフィットしています。しかし、より大きな解像度のモニターで見ると、画像サイズが終わるところに大きな空間があり、明らかに見えてしまいます。CSSでリサイズしているつもりだったのですが / タブレット端末の風景 / @media screen and (max-width: 1060px) {。
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
img { max-width: 100%; }
}
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
}
この画像をすべての解像度で、1366×768で見たときのように表示させたい。
何かとお世話になります。
画像比率を落とさずに、やろうとしていることを実現するのは根本的に不可能だと思いますし、おそらく望ましくないことだと思います。background-size'プロパティを使用することを検討されましたか?以下のcssは、かなり良い外観を実現しています:
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
こちらでご覧いただけます:
cover このキーワードは、背景画像をできるだけ小さくし、かつ、その寸法が背景配置領域の対応する寸法以上であることを指定するものである。
contain このキーワードは、背景画像をできるだけ大きくし、その寸法が背景配置領域の対応する寸法以下であることを保証するものです。そのため、coverの代わりにcontainを使用してみてください。
100% 縦横ともに100%に拡大縮小され、トリミングされることはありません。
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}