鐵軌上的圓角的阿凡達紅寶石

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 
}