我正在尝试修复页面顶部的页眉，并将 div 标签包含的图像插入页眉。我插入成功了，只是我无法将图像放入div中。实际上 div 标签不适合 header 标签。
这是我的代码片段：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloneCoding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main">
<div class="main-place_holder place_holder"></div>
<header class="main-header place_holder align_fixed_header_center">
<div class="main-header-logo">
<img src="assets/images/logo.png" alt="image" class="main-header-logo-image">
</div>
<div class="main-header-brand">brand</div>
</header>
<section class="main-container">
<div class="main-container-card">content</div>
<div class="main-container-card">content</div>
<div class="main-container-card">content</div>
</section>
</main>
</body>
</html>
样式.css
body {
box-sizing: border-box;
display: flex;
flex-direction: row;
border: 1px solid black;
}
.main {
padding: 1rem;
border: 1px solid salmon;
display: flex;
flex-direction: column;
justify-content: center;
}
.main-header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
}
.place_holder {
height: 3rem;
margin: 3rem;
}
.align_fixed_header_center {
width: auto;
top: 0;
left: 0;
right: 0;
}
.main-container {
display: flex;
flex-direction: row;
}
.main-header-logo {
/* Doesn't work */
width: 100px;
height: auto;
}
.main-header-logo-image {
height: 100%;
}
这是我尝试过的：
height: 100%;width: 100px;height: 100%;有什么方法可以让我将这个大图像放入固定标题中？
要使图像按宽度或高度的 100% 比例适合其容器，您可以使用
max-width, max-height.main-header-logo-image {
height: 100%;
/* fit image to container */
max-width: 100%;
max-height: 100%;
}
body {
box-sizing: border-box;
display: flex;
flex-direction: row;
border: 1px solid black;
}
.main {
padding: 1rem;
border: 1px solid salmon;
display: flex;
flex-direction: column;
justify-content: center;
}
.main-header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
}
.place_holder {
height: 3rem;
margin: 3rem;
}
.align_fixed_header_center {
width: auto;
top: 0;
left: 0;
right: 0;
}
.main-container {
display: flex;
flex-direction: row;
}
.main-header-logo {
/* Doesn't work */
width: 100px;
height: auto;
}
.main-header-logo-image {
height: 100%;
/* fit image to container */
max-width: 100%;
max-height: 100%;
}<main class="main">
<div class="main-place_holder place_holder"></div>
<header class="main-header place_holder align_fixed_header_center">
<div class="main-header-logo">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online.png" alt="image" class="main-header-logo-image">
</div>
<div class="main-header-brand">brand</div>
</header>
<section class="main-container">
<div class="main-container-card">content</div>
<div class="main-container-card">content</div>
<div class="main-container-card">content</div>
</section>
</main>向 .main-header 添加高度完成了工作。 对于我的情况，Victor，图像太大而无法使用
width: 100%;.main-header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
height: 3em;
}