所以我有以下html代碼
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;
}
.banner {
margin-top: 30px;
}<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="banner">
<img src="pagebanner.png" alt="page banner">
</div>
</body>
</html>但是，橫幅影像不會占據頁面的整個寬度。相反，它非常小。我試過做 width = 100% 但這并不能解決它。我該怎么做才能使橫幅影像全寬？
uj5u.com熱心網友回復：
我剛剛width: 100%;在img上添加了，對我來說一切都很好。
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
body > header > div > img {
width: 7rem;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;
}
body > div > img {
width: 100%;
}
.banner {
margin-top: 30px;
}<header>
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png">
</div>
<nav class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="banner">
<img src="https://www.sci-techdaresbury.com/wp-content/uploads/2019/09/back_doitbetter-1200x300.jpg" alt="page banner">
</div>uj5u.com熱心網友回復：
這是一個簡單的修復。您只需要在 img 鏈接本身中添加一點 CSS。
<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="banner">
<img src="pagebanner.png" alt="page banner" style="width:100%;">
</div>
</body>
</html>
如果您希望它適合整個頁面而不僅僅是左右，請將其粘貼到 img 鏈接所在的位置
<img src="pagebanner.png" alt="page banner.png" alt="page banner" style="width:100%;hight:100%;">
從css代碼中洗掉橫幅樣式，你應該很高興
uj5u.com熱心網友回復：
一種解決方案是使影像background-image具有以下關聯樣式。我插入了一個虛擬影像來反映您的影像將如何顯示。
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo {
max-width: 60px;
padding: 5px;
}
.navigation {
align-self: flex-end;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #c5f3f7;'
height: 20vh;
}
.banner {
background-image: url('https://dummyimage.com/600x400/000/fff&text=pagebanner');
background-size: cover;
background-position: center;
height: 80vh;
}
body {
margin: 0;
}<!doctype html>
<html>
<head>
<title>HTML Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png">
</div>
<nav class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="banner">
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/428745.html