轨道上的圆形头像红宝石 [英] Rounded avatar ruby on rails

查看：55
本文介绍了轨道上的圆形头像红宝石的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让我的用户上传的头像在我的 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.

这篇关于轨道上的圆形头像红宝石的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆