Image not taking full width of page-CodePudding

So I have the following html code

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 >
      <img src="logo.png">
    </div>
    <nav >
      <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 >
    <img src="pagebanner.png" alt="page banner">
  </div>
</body>

</html>

However the banner image does not take up the full width of the page. Instead, it is very small. I have tried doing width = 100% but this does not fix it. What can I do to make the banner image full width?

CodePudding user response：

This is an easy fix. All you need is a little CSS in the img link itself.

    <!doctype html>
    <html>
    <head>
    <title>HTML Layout</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <header>
    <div >
    <img src="logo.png">
    </div>
    <nav >
    <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 >
    <img src="pagebanner.png" alt="page banner" style="width:100%;">
    </div>
    </body>
    </html>

And if you want it to fit the entire page and not just left and right, paste this to where the img link is

    <img src="pagebanner.png" alt="page banner.png" alt="page banner" style="width:100%;hight:100%;">

Remove the banner style from the css code and you should be good to go

CodePudding user response：

I just added width: 100%; at the img, everything is fine for me.

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 >
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png">
  </div>
  <nav >
    <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 >
  <img src="https://www.sci-techdaresbury.com/wp-content/uploads/2019/09/back_doitbetter-1200x300.jpg" alt="page banner">
</div>

CodePudding user response：

One solution would be to make the image your background-image with the following styles associated. I inserted a dummy-image to reflect how your image would display.

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 >
      <img src="logo.png">
    </div>
    <nav >
      <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 >
  </div>
</body>

</html>