Jump to content
Sign in to follow this  
Why Not

Центровка изображения в круге css

Recommended Posts

Здравствуйте! Подскажите пожалуйста как отцентровать изображение в круге?

Возьмем пример:

<div class="myimg1">
<img src="../img1.png" alt="" title=""/>
</div>
 
Здесь класс myimg1 выставлен в центре, а картинка, которая в этом классе, берет начало слева сверху от круга. Мне нужно что бы картинка центровалась в этом круге, т.е. не вырезался кусок слева сверху, а был по середине. Как это организовать? Голову уже сломал, поисковики замучил...

Share this post


Link to post

 

Здравствуйте! Подскажите пожалуйста как отцентровать изображение в круге?

Возьмем пример:

<div class="myimg1">
<img src="../img1.png" alt="" title=""/>
</div>
 
Здесь класс myimg1 выставлен в центре, а картинка, которая в этом классе, берет начало слева сверху от круга. Мне нужно что бы картинка центровалась в этом круге, т.е. не вырезался кусок слева сверху, а был по середине. Как это организовать? Голову уже сломал, поисковики замучил...

 

 

http://jsfiddle.net/wwwofu3o/

  • Upvote 2

Share this post


Link to post

спасибо конечно, но не то. Если картинка будет разного размера? Допустим взять ту же аву. У каждой авы разные изображения. Мне и нужно что бы все изображения подстраивались, и, кстати, не зависимо от высоты

Share this post


Link to post

 

Здравствуйте! Подскажите пожалуйста как отцентровать изображение в круге?

Возьмем пример:

<div class="myimg1">
<img src="../img1.png" alt="" title=""/>
</div>
 
Здесь класс myimg1 выставлен в центре, а картинка, которая в этом классе, берет начало слева сверху от круга. Мне нужно что бы картинка центровалась в этом круге, т.е. не вырезался кусок слева сверху, а был по середине. Как это организовать? Голову уже сломал, поисковики замучил...

 

Чуть подробнее, пожалуйста.

Share this post


Link to post

Чуть подробнее, пожалуйста.

h_1438333347_7243208_4ff3ffa162.png

 

Видишь круг? А то что выделено сидим (этот квадрат) - это картинка. Скажем так: точка отсчета у картинки идет слева сверху от круга, а мне нужно что бы эта картинка выравнивалась по середине черного блока (на котором этот круг, и получается должно выглядеть так:

 

h_1438333617_2570452_6bef4e8b84.png

 

Так же хочу заметить, что height будет любой, но width не менее 140px

Edited by gundzha

Share this post


Link to post

спасибо конечно, но не то. Если картинка будет разного размера? Допустим взять ту же аву. У каждой авы разные изображения. Мне и нужно что бы все изображения подстраивались, и, кстати, не зависимо от высоты

 

>Если картинка будет разного размера?

Таки в моем решении картинке указывается фиксированный размер.

 

А вообще, в Vii миниатюры режутся пропорциональные, так что эти костыли не нужны.

А делать круг из аватарки в профиле - бред и не красиво.

Edited by GreenMonster

Share this post


Link to post

Да параметр на картинку повесь margin: 0 auto; и должно помочь.

не поможет, пробовал(

Share this post


Link to post

>Если картинка будет разного размера?

Таки в моем решении картинке указывается фиксированный размер.

 

А вообще, в Vii миниатюры режутся пропорциональные, так что эти костыли не нужны.

А делать круг из аватарки в профиле - бред и не красиво.

квадраты уже как то надоели...

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×