Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file.
I have tested code that works:
page.html
<a class="navbar-brand" href="#">
<img src="../resources/images/logo.png" class="img-responsive" />
</a>
style.css
.navbar-brand > img {
max-height: 100%;
}
h1 { text-align:center; }
However, when incorporating Thymeleaf into my HTML, it looks like this:
thymeleaf.html
[Bootstrap navbar...]
<a class="navbar-brand" href="#">
<img th:src="@{/resources/images/logo.png}" class="img-responsive" />
</a>
[...]
[/Bootstrap navbar]
<h1>Test</h1>
When using the same CSS, the rule doesn't get applied to the image but instead centers the h1 text.
EDIT: Rules applied to the content div within the Bootstrap navbar are not being recognized (not showing up in "inspect element"). Other rules set to a normal div without Bootstrap classes work fine.
EDIT2: CSS import
In servlet.xml
<mvc:resources mapping="/resources/**" location="/resources/"/>
In thymeleaf.html
<link rel="stylesheet" type="text/css" media="all"
href="/resources/css/style.css" th:href="@{/resources/css/style.css}" />
Any suggestions on how to resolve this issue? Thank you in advance.