Ширина фонового изображения - PullRequest
Новая
       21

Ширина фонового изображения

4 голосов
/ 06 декабря 2011

Это мой HTML: 

<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>

user-avatar класс следующий: 

#user-avatar {
     width: 100px;
     height: 100px;
     margin: auto;
     position: relative;
     background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}

Рамка: 

#user-avatar img { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     width: 122px; 
     height: 127px; 
     margin-top: -62px; 
     margin-left: -63px; 
}

Оригинал user-avatar фоновое изображениеразмеры составляют 23x25, но я хочу, чтобы он был изменен до 100x100px, и проблема в том, что независимо от того, что я установил в атрибуте width: xxx, это не будет работать.Аватар, находящийся за рамкой, всегда имеет свои первоначальные размеры.

Ответы [ 3 ]

5 голосов
/ 06 декабря 2011

Вы не можете изменить размер изображения, установленного в качестве фона контейнера.Единственный способ изменить размер изображения - использовать тег img и изменить его размер с помощью атрибутов css ширины и высоты.

Посмотрите здесь может быть, это поможет.

3 голосов
/ 06 декабря 2011

Вы можете использовать свойство background-size CSS3 для тех браузеров, которые его поддерживают, а затем вернуться к компромиссному решению для старых браузеров. Компромиссное решение может заключаться в том, чтобы установить цвет фона, чтобы заполнить пространство вокруг фонового изображения, или использовать свойство background-repeat для «разбиения» на плитки изображения.

Например: 

#user_avatar {
    ...
    background: url(images/avatars/128.jpg) blue 50% 50% no-repeat;
    background-size: 100px 100px;
}
3 голосов
/ 06 декабря 2011

Вы можете использовать background-size, но только самые современные браузеры поддерживают его: https://developer.mozilla.org/en/CSS/background-size

...