Wie man SCSS-Änderungen an Bildern auf Schienen macht

Question

Ich benutze Ruby auf Schienen und Bootstrap für eine Nav-Leiste - möchte eine Möglichkeit einrichten, die Größe des "ZM-Logos" durch ein scss-Stylesheet-Setup zu ändern, um das Nav zu ändern Bar.

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> 

In Sheets ich eine navbar.scss-Datei erstellt haben die Änderungen in machen und haben eine @import für diese Datei hinzugefügt in Anwendungen. Klasse "Logo" scheint einfach nicht zu funktionieren.

Alle Gedanken wären brilliant!

Answer 1

Wenn Sie schreiben den Code wie folgt aus:

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

Sie bewerben sich die Klasse "Logo" zum a-Tag.

Wenn Sie schreiben den Code wie folgt aus:

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

Sie wenden die Klasse "Logo" zum img-Tag.

Der feine Unterschied ist die Position der schließenden runden Klammer. Werfen Sie einen Blick in Ihr Stylesheet und sehen Sie, ob Sie versuchen, die "Logo" Klasse auf das a Tag oder das img Tag anzuwenden.

Jetzt, wenn Sie das große Bild betrachten, versuchen Sie, einen Link innerhalb eines Links zu setzen.

Die folgende:

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

produzieren:

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

Wenn das, was Sie eigentlich wollen, ist:

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

, die produzieren:

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

Seien Sie bei der Verwendung der Rails-Funktionen vorsichtig und klicken Sie im Zweifelsfall mit der rechten Maustaste auf das Element im Webbrowser und klicken Sie auf Inspect element. Auf diese Weise können Sie die HTML-Ausgabe sehen.