Масштабируемое изображение по центру (для очень простой сети)

Я создаю веб-сайт, который скоро появится, и я хочу сделать его простым — одно изображение в мертвой точке страницы, масштабируемое для разных размеров браузера. Я пытаюсь найти это в Google, но ни одно из решений не дает мне желаемого результата. Использование max-width дает странные результаты, потому что я использую отрицательные поля в пикселях, поэтому при масштабировании изображения эти поля не применяются.

Изображение, которое я хочу центрировать, имеет размер 700x700 пикселей.

Любая помощь приветствуется :)

Это моя текущая страница: http://jsfiddle.net/EYL5U/

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}

img {
position: absolute;
top: 50%;
left: 50%;
width: 700px;
height: 70px;
margin-top: -350px;
margin-left: -350px;
max-width: 100%;
}

Он не масштабируется, когда я изменяю размер своего браузера...


html css centering
person TM23    schedule 08.11.2013    source источник
comment
некоторые фрагменты или скрипка могут помочь!   -  person ra_sangeeth    schedule 08.11.2013

Ответы (2)


arrow_upward
4
arrow_downward 

img {
    position:absolute;
    margin:auto;
    top:0;bottom:0;left:0;right:0;
}

пример jsFiddle

person j08691    schedule 08.11.2013
comment
Он центрирует его, но я не масштабирую его, когда уменьшаю область просмотра. - person TM23; 08.11.2013
comment
Вы можете добавить max-width:100%;max-height:100%; для этого. jsfiddle.net/j08691/4AVmJ/2 - person j08691; 08.11.2013
comment
Это работает, единственная проблема, которую я вижу, это когда я пробую ваш jsfiddle локально, он сжимает изображение, когда я сжимаю браузер по горизонтали. - person TM23; 08.11.2013

arrow_upward
0
arrow_downward

Вы можете сделать это с помощью css media query:

img {
        position:absolute;
        margin:auto;
        top:0;bottom:0;left:0;right:0;
        max-width: 640px;
}

@media screen and (max-width: 640px) and (max-aspect-ratio: 1920/1200) {
    img {
        position:absolute;
        margin:auto;
        top:0;bottom:0;left:0;right:0;
        width: 100%;
    }
}

@media screen and (max-height: 400px) and (min-aspect-ratio: 1920/1200) {
    img {
        position:absolute;
        margin:auto;
        top:0;bottom:0;left:0;right:0;
        height: 100%;
    }
}

В моем примере изображение имеет размеры 1920x1200, поэтому вам, очевидно, нужно настроить соотношение и размеры для вашего изображения.

Рабочий пример: http://jsfiddle.net/A4rWW/

person Krzysztof    schedule 08.11.2013
comment
Не масштабируется пропорционально в моем Chrome или FF... оно сжимает изображение по горизонтали... и я не видел таблиц уже много лет :), но тем не менее спасибо :) - person TM23; 08.11.2013
comment
Таблицы по-прежнему являются самым простым способом добиться среднего вертикального выравнивания :) У меня есть новое решение, проверьте его. - person Krzysztof; 08.11.2013