Pravilna izrada profilne slike - krug (CSS)

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Postovanje iteresuje me pravilna izrada kruga u css-u. Vezbam ovako nesto





Centriranje slike   <div class="container text-center">             <img src="images/profile-girls.png" class="img-circle img-responsive" alt="profile picture">                 <h2>free portfolio PSD template<br>  FOR GRAPHIC designerS </h2>

HTML
<img src="images/profile-girls.png" class="img-circle img-responsive" alt="profile picture">

CSS
.jumbotron .img-circle {     width: 150px;     height: 150px;     border-radius: 50%;     text-align: center;     display: inline-block;     box-shadow: 2px 4px 0 2px rgba(0,0,0,0.1);     border: .5em solid #3695ff; }

Da li ima jos neki primer izrade kruga, hvala pozdrav

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

Napisano: 24 Feb 2016 10:48

border-radius: 50%;

Dopuna: 24 Feb 2016 10:48

Odgovaram po naslovu posta.

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

A što bi bezveze komplikovao ako imaš atribut koji odlično radi i podržan je u svim modernim pretraživačima?

• 3Ovo se svidja korisnicima: dejnik978, drummer, _ivKe
  
  Registruj se da bi pohvalio/la poruku!

Napisano: 24 Feb 2016 16:27

.img-circle je klasa koja vec dolazi sa bootstrapom i koja sama po sebi ima vec podesen "kruzni" border-radius.

.img-circle {   border-radius: 50%; }

Tako da je bespotrebno ponovo joj davati taj parametar.

Dopuna: 24 Feb 2016 16:29

Takodje u tvom primeru cak nije potreban ni text-align: center; jer si vec zadao bootstrapovu klasu .text-center na parent div, a koja radi isto to.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Hvala svima. Problem je kada stavim neku sliku na bordes-radius:50% da slika bude izoblicena. To bi valjda trebao da resim nevezano za css, To da uradim u photoshop-u? Da i visak je text-center (duplirao sam).

Da li ima neki standard za sliku npr width: 150px;     height: 150px; ili 200px x 200px ili ? Da ne bi dolazilo do krivljenja slicice

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

Krivljenja? Ili izobličavanja? Verovatno je zato što ti aspekt te slike nije 1:1. Moguće je rešiti to, al ne pitaj me kako. Suštinski je potrebno "kropovati" sliku na kvadrat čija je stranica jednaka manjoj dimenziji slike.