如何对 Rails 上的图像进行 SCSS 更改答案

【问题标题】：How to make SCSS changes to images on rails如何对 Rails 上的图像进行 SCSS 更改
【发布时间】：2017-10-01 14:23:40
【问题描述】：

我正在使用 ruby on rails 和 bootstrap 作为导航栏 - 想要通过 scss 样式表设置更改“ZM logo”大小以更改导航栏。

Application.html.erb =

  <div class="navbar-header">
    <a class="navbar-brand" href="#">
      <%= link_to image_tag('ZM Logo (colour).jpg'), class: "Logo" %> 
    </a>
  </div>


    <ul class="navbar-nav">
      <li class="nav-item"><%= link_to "Home", root_path, class: "nav-link" %></li>
      <li class="nav-item"><%= link_to "About", about_path, class: "nav-link" %></li>
      <li class="nav-item"><%= link_to "Contact", "#", class: "nav-link" %></li>
    </ul>
</div>

在样式表中，我创建了一个 navbar.scss 文件来进行更改，并在应用程序中为该文件添加了一个 @import。 “徽标”类似乎不起作用。

任何想法都会很棒！

【问题讨论】：

标签： html css ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

当你这样写代码时：

<%= link_to image_tag('ZM Logo (colour).jpg'), class: "Logo" %>

您将"Logo" 类应用到a 标记。

当你这样写代码时：

<%= link_to image_tag('ZM Logo (colour).jpg', class: "Logo") %>

您正在将"Logo" 类应用到img 标记。

细微的差别是右圆括号的位置。查看您的样式表，看看您是否尝试将"Logo" 类应用于a 标记或img 标记。

现在，如果您看大局，您会尝试将链接放入链接中。

以下内容：

<a class="navbar-brand" href="#">
  <%= link_to image_tag('ZM Logo (colour).jpg'), class: "Logo" %> 
</a>

将产生：

<a class="navbar-brand" href="#">
  <a class="Logo"><img source='ZM Logo (colour).jpg'></a>    
</a>

当你真正想要的是：

<a class="navbar-brand" href="#">
  <%= image_tag 'ZM Logo (colour).jpg', class: "Logo" %> 
</a>

这将产生：

<a class="navbar-brand" href="#">
  <img source='ZM Logo (colour).jpg', class='Logo'>
</a>

请谨慎使用 Rails 功能，如有疑问，请右键单击 Web 浏览器中的元素并单击 Inspect element。这样你就可以看到 HTML 输出了。

【讨论】：