问题描述
newb 在这里提出一个愚蠢的问题...我有一个带有徽标图像的标题,我认为它的尺寸非常大(我认为是 1200 像素),但我需要它不要显示得太大。我试图在 CSS 中调整它的大小,但没有任何反应,我做错了什么?我希望能够在不向 HTML 中添加尺寸的情况下调整其大小。
非常感谢任何帮助。
body {
font-family: 'Trebuchet MS','Lucida Sans Unicode','Lucida Grande','Lucida Sans',Arial,sans-serif;
font-size: 1.1rem;
line-height: 1.5rem;
margin: 0 auto;
}
.container {
max-width: 40rem;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
margin-left: .5rem;
}
.header {
background: #3f6660;
padding: 2rem;
border-bottom: 0.75rem solid #2e4945
}
.logo img {
justify-self: center;
align-self: center;
max-width: 150px;
}
.nav-list,.nav-item,.product-list,.product-item {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-link {
display: block;
padding: 1rem;
text-align: center;
color: black;
background: #8BDF83;
border: .2rem solid #FEFFFE;
border-radius: .5rem;
margin: 1rem 0rem;
text-decoration: none;
transition: 150ms;
}
.nav-link:focus,.nav-link:hover {
background: green;
color: white;
}
<div class="container">
<header class="header">
<div class="logo">
<img src="https://i.natgeofe.com/n/f0dccaca-174b-48a5-b944-9bcddf913645/01-cat-questions-nationalgeographic_1228126.jpg" alt="logo" />
</div>
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
</ul>
</nav>
</header>
</div>
解决方法
在下面的css类中输入所需的宽度和高度值
.logo img {
justify-self: center;
align-self: center;
width: 500px;
height: 50px;
}
img {
width: 500px;
height: 50px;
margin-left: .5rem;
}