我想让我的用户上传的头像在我的 Udemy 的 rails 应用程序项目中显示.图像仍然按照上传的方式显示.
下面是我的 show.html.erb 文件
<div class="col-md-3 text-center"><div class="avatar"><%= image_tag @user.profile.avatar.url %></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="井剖面-块剖面-描述"><h3>背景</h3><%=@user.profile.description %>
<% if current_user.plan_id == 2 %><div class="well profile-block contact-info"><h3>联系人:</h3><%=@user.profile.phone_number %><br/><%=@user.profile.contact_email %><br/>
<%结束%>
下面是我的用户,css.scss 文件
<div class="col-md-3 text-center"><div class="avatar"><%= image_tag @user.profile.avatar.url %></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="井剖面-块剖面-描述"><h3>背景</h3><%=@user.profile.description %>
<% if current_user.plan_id == 2 %><div class="well profile-block contact-info"><h3>联系人:</h3><%=@user.profile.phone_number %><br/><%=@user.profile.contact_email %><br/>
<%结束%>
解决方案看起来您可能正在使用 Twitter Bootstrap.如果是这样,则内置了一个方便的 CSS 类.
只需将 class: 'img-circle' 添加到您的 image_tag
...#修改这一行如下<div class="avatar"><%= image_tag @user.profile.avatar.url, class: 'img-circle' %></div>...此页面 Bootstrap 文档有很多有用的信息和示例.
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> 解决方案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.
更多推荐
轨道上的圆形头像红宝石
发布评论