图像未占据整个页面宽度
[英]Image not taking full width of page
问题描述
所以我有以下 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% 但这并不能解决问题。 我该怎么做才能使横幅图像全宽？
3 个解决方案
解决方案1
1 2022-02-09 23:23:35
我刚刚添加了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>
解决方案2
0 2022-02-09 22:47:05
这是一个简单的修复。 您所需要的只是 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代码中的banner样式，你应该对go好了
解决方案3
0 2022-02-09 23:48:42
一种解决方案是将图像设为background-image并关联以下 styles。 我插入了一个虚拟图像来反映您的图像将如何显示。
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>
我的图像未占用页面的全部宽度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.