Я работал с временной страницей на http://www.flywavez.com, но я не могу добиться, чтобы изображение изменяло размер и было одинаковым во всех разрешениях экрана. На iPhone оно обрезает девушку до талии, и оно отлично подходит при просмотре на моем 19" экране ноутбука с разрешением 1366 x 768, и даже когда я подаю видео на мой 55" телевизор через VGA с ноутбука. Однако когда я просматриваю на больших мониторах с большим разрешением, появляется большое пространство и очевидно, где заканчивается размер изображения. Я думал, что изменил размер CSS с помощью / Tablet Landscape / @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 x 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 Это ключевое слово определяет, что фоновое изображение должно быть масштабировано до максимально возможного размера, при этом оба его размера должны быть меньше или равны соответствующим размерам области позиционирования фона. Поэтому попробуйте использовать contain вместо cover
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;
}
В принципе, это все, что вам нужно:
body {
background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}