英文:
Resize logo to menu in CSS with Thymeleaf
问题
我有这个CSS：
/* 全局CSS样式 */
body {
background-color: #364f6b;
margin: 0;
padding: 0;
}
/* 样式化标志 */
.logo {
width: 1px;
height: auto;
}
index.html：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<!-- 菜单 -->
<link id="themeLink" th:href="@{/css/mystic-planets.css}" rel="stylesheet" />
<meta name="format-detection" content="telephone=no">
</head>
<body>
<header>
<img th:src="@{/images/137364472_padded_logo.png}" alt="mystic-planets" />
</header>
</body>
</html>
但是标志没有重新调整大小。
英文:
I have this css:
/* Global CSS styles */
body {
background-color: #364f6b;
margin: 0;
padding: 0;
}
/* Styling the logo */
.logo {
width: 1px;
height: auto;
}
index.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<!-- Menu -->
<link id="themeLink" th:href="@{/css/mystic-planets.css}" rel="stylesheet" />
<meta name="format-detection" content="telephone=no">
</head>
<body>
<header>
<img th:src="@{/images/137364472_padded_logo.png}" alt="mystic-planets" />
</header>
</body>
</html>
but the logo does not resize
答案1
得分: 2
你当前的CSS规则只针对具有logo类的元素，但是在你的HTML中，img标签没有这个类。
如果你想将CSS规则应用于你的标志，你应该像这样将logo类添加到img标签中：
<img class="logo" th:src="@{/images/137364472_padded_logo.png}" alt="mystic-planets" />
然后，你的CSS规则应该起作用。然而，使用width: 1px;，你的标志可能会显得非常小，所以你可能需要调整width属性到你想要的大小。
.logo {
width: 100px; /* 根据你的喜好调整 */
height: auto;
}
英文:
Your current CSS rule for the .logo class only targets elements that have the logo class, but in your HTML, the img tag does not have that class.
If you want to apply the CSS rule to your logo, you should add the logo class to the img tag like this:
<img class="logo" th:src="@{/images/137364472_padded_logo.png}" alt="mystic-planets" />
Then, your CSS rule should work. However, with width: 1px;, your logo might appear extremely small, so you might want to adjust the width property to your desired size.
.logo {
width: 100px; /* Adjust to your preferred size */
height: auto;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论