Rounded avatar ruby ​​on rails

Question

Ich möchte meine Avatare haben, die meine Benutzer hochladen, um auf meinem Rails App-Projekt für Udemy zu sein. Das Bild erscheint immer noch so quadratisch wie es hochgeladen wurde.

unten ist mein show.html.erb Datei

---

<div class="row"> 
<div class="col-md-3 text-center"> 
<div class="avatar"><%= image_tag @user.profile.avatar.url %></div> 
</div> 
<div class="col-md-6"> 
    <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1> 
    <h3><span class="job_title_icon"><%= job_title_icon %></span> <%= @user.profile.job_title %></h3> 
    <div class="well profile-block profile-description"> 
    <h3>Background</h3> 
    <%= @user.profile.description %> 
    </div> 

    <% if current_user.plan_id == 2 %> 
    <div class="well profile-block contact-info"> 
    <h3>Contact:</h3> 
    <%= @user.profile.phone_number %><br/> 
    <%= @user.profile.contact_email %><br/> 
    </div> 
    <% end %> 

</div> 

Unten ist mein Benutzer, css.scss Datei

---

<div class="row"> 
<div class="col-md-3 text-center"> 
<div class="avatar"><%= image_tag @user.profile.avatar.url %></div> 
</div> 
<div class="col-md-6"> 
    <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1> 
    <h3><span class="job_title_icon"><%= job_title_icon %></span> <%= @user.profile.job_title %></h3> 
    <div class="well profile-block profile-description"> 
    <h3>Background</h3> 
    <%= @user.profile.description %> 
    </div> 

    <% if current_user.plan_id == 2 %> 
    <div class="well profile-block contact-info"> 
    <h3>Contact:</h3> 
    <%= @user.profile.phone_number %><br/> 
    <%= @user.profile.contact_email %><br/> 
    </div> 
    <% end %> 

</div> 

Answer 1

Es sieht aus, als wenn Sie Twitter Bootstrap werden könnten, verwenden. Wenn ja, gibt es eine praktische CSS-Klasse eingebaut.

Nur class: 'img-circle' zu Ihrem image_tag hinzufügen

... 
#change this line as follows 
<div class="avatar"><%= image_tag @user.profile.avatar.url, class: 'img-circle' %></div> 
... 

This page der Bootstrap docs hat viele nützliche Informationen und Beispiele.

Answer 2

Ich denke, Ihre avatar Klasse so einzustellen, dass das Bild rund ist, ist ein besserer Weg, um es anzugehen.

In Ihrem CSS definieren Sie es als solche:

.avatar { 
    border-radius: 50%; 
    // also might be good to set width and height 
}