Центрированное масштабируемое изображение (для чрезвычайно простого веба)

Question

Центрированное масштабируемое изображение (для чрезвычайно простого веба)

0

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

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

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

Это моя текущая страница: 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%;
}

Он не масштабируется при изменении размера моего браузера...

TM23 08 нояб. 2013, в 16:18

Источник

0

некоторые фрагменты или скрипка могут помочь!
SangeethK 08 нояб. 2013, в 15:00

Теги:

html

css

centering

2 ответа

Ещё вопросы

некоторые фрагменты или скрипка могут помочь!

j08691 · Answer 1 · 2013-11-08T12-13-00.000Z

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

Пример jsFiddle

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

Krzysztof · Answer 2 · 2013-11-08T13-22-00.000Z

Вы можете сделать это, используя запрос css media:

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/

Не масштабируется пропорционально в моем Chrome или FF ... он сжимает изображение по горизонтали ... а я годами не видел таблиц :) но тем не менее спасибо :)
Таблицы по-прежнему самый простой способ достижения среднего вертикального выравнивания :) У меня есть новое решение, проверьте его