Как сделать резиновую картинку?

Question

[Resolut1on]

Добрый вечер)Ребята не подскажите как сделать такую резиновую картинку как на этом сайте creativegrenade.com/alia-rebrand (я про логотип с буквой A, c div id="headerbg")Дело в том, что она сжимается как то странно, логотип с буквой а всегда по центру экрана сколько я пробовал у меня не получалось так сделатью

Answer 1

[Павел]

background-position: 50%;
    background-size: cover;

htmlbook.ru/css/background
htmlbook.ru/css/background-size
htmlbook.ru/css/background-position

https://jsfiddle.net/2phfvjs3/

Answer 2

[Александр Пупкин]

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin:0 auto;
}

Answer 3

[Resolut1on]

Ребята спасибо за ответы это все работает но это не, что нужно попробуйте включить мобильную версию с шириной 320px если использовать обычный max-width: 100% c margin: 0 auto то растояние от края до логотипа не умешается тут хитрость какая то уменьшение с акцентом на центр.

Comments

[Павел]

я вам скинул стили бекграунда. Точно такие же у них. Позиция по центру, и размер 'cover' - именно так оно и работает.

[Павел]

https://jsfiddle.net/2phfvjs3/ обновил в ответе, расайзите на здровье

[Павел]

и причем тут max-width: 100% c margin: 0 auto, если там бекграугд, а не img

[Resolut1on]

Спасибо тебе большое, понять не могу все тоже самое писал но только высоту ставил 100% неужели только из-за высаты это влияет?

[Павел]

Resolut1on: да нет, не влияет она на background. И не забывайте отмечать решения.