轨道上的圆形头像红宝石

Question

我想让我的用户上传的头像在我为 Udemy 的 Rails 应用程序项目中使用。图片仍以上传时的方式显示出来。

下面是我的 show.html.erb 文件

---

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

下面是我的 users,css.scss 文件

---

<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

我认为将avatar 类设置为圆形是更好的处理方法。

在您的 CSS 中，您可以这样定义它：

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

Answer 2

看起来您可能正在使用 Twitter Bootstrap。如果是这样，则内置了一个方便的 CSS 类。

只需将class: 'img-circle' 添加到您的 image_tag 中

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

Bootstrap 文档的This page 有很多有用的信息和示例。