铁轨上的圆角的阿凡达红宝石

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> 

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

它看起来好像你可能会使用Twitter的引导。如果是这样，有建在一个方便的CSS类。

只需添加class: 'img-circle'您IMAGE_TAG

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

的引导文件的This page有很多有用的信息和例子。

Answer 2

我认为设置你的avatar类，使图像是圆的是一个更好的方法来处理它。

在你的CSS，你把它定义为这样的：

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