rails 上的圆形头像 ruby

Question

我想让我的用户上传的头像出现在我的 rails Udemy 应用程序项目中。图片仍然按照上传时的方式显示。

下面是我的 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>

下面是我的用户，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 class 使图像是圆形是更好的方法。

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

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

Answer 2

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

只需将 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 有很多有用的信息和示例。

rails 上的圆形头像 ruby

Rounded avatar ruby on rails

ruby-on-rails

rounded-corners