Rounded avatar ruby on rails

I would like to have my avatars that my users upload to be round on my rails app project for Udemy. The image still comes out square the way it was uploaded.

below is my show.html.erb file

<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>

Below is my users,css.scss file

<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>

回答1:

It looks as if you might be using Twitter Bootstrap. If so, there is a handy CSS class built in.

Just add class: 'img-circle' to your image_tag

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

This page of the Bootstrap docs has lots of useful info and examples.

回答2:

I think setting your avatar class so that the image is round is a better way to approach it.

In your CSS, you define it as such:

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