Jump to content

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


Why Not
 Share

Recommended Posts

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

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

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

 

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

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

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

 

 

http://jsfiddle.net/wwwofu3o/

  • Upvote 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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

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

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

 

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

Link to comment
Share on other sites

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

h_1438333347_7243208_4ff3ffa162.png

 

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

 

h_1438333617_2570452_6bef4e8b84.png

 

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

Edited by gundzha
Link to comment
Share on other sites

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

 

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

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

 

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

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

Edited by GreenMonster
Link to comment
Share on other sites

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

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

 

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...