CSS для изменения размеров изображений и для любого экрана

Я работал со временной страницей на http://www.flywavez.com, но я не могу получить изображение для изменения размера и быть одинаковым во всех разрешениях экрана. На iPhone он отключает девушку до пояса, и она идеально подходит при просмотре на моем 19-дюймовом экране ноутбука с разрешением 1366 x 768 и даже когда я подал видео на свой 55-дюймовый телевизор через VGA с моего ноутбука. Однако, когда я смотрю на большие мониторы с большим разрешением, есть большое пространство и очевидное представление, где размер изображения заканчивается. Я думал, что я изменил размер CSS с экрана * Tablet Landscape */@media и (max-width: 1060px) {#wrapper {width: 67%; } } }}

    /* 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.

Спасибо за любую помощь.

Ответ 1

Я думаю, что принципиально невозможно достичь того, что вы пытаетесь сделать, не теряя отношения к изображению, что, вероятно, нежелательно. Считаете ли вы использование свойства "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;
}

Вы можете увидеть это здесь: http://jsfiddle.net/DTN54/

Ответ 2

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;
    }

Ответ 3

В принципе, это все, что вам нужно:

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}