Центрирано мащабируемо изображение (за изключително проста мрежа)

Създавам скоро уебсайт и искам да го направя прост - едно изображение в мъртвия център на страницата, мащабируемо до различни размери на браузъра. Опитвам се да го потърся в 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%;
}

Не се мащабира, когато преоразмеря браузъра си...


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 медийна заявка:

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