How to make an image width the same as the screen width-CodePudding

I'm trying to make my school project's website mobile-friendly, but I don't want the user to scroll left or right to see images. I want the value of max-width of an image to be the same as the width of the users screen. (When on mobile)

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}


header{
  margin: 0 auto;
  justify-content: center;
  width: 519px;
  height: 200px;
}

header img{
  width: 519px;
  height: 200px;
}

HTML

<header>
    <h1 >Welcome to caillou.tk!</h1>
    <a href="/"><img src="img/k.png" alt="Caillou Logo"></a>

  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="https://www.youtube.com/channel/UC4yQCVlLhTmOqX5kUkAGr0g">Watch</a></li>
      <li><a href="characters">Characters</a></li>
      <li><a href="about">About Caillou</a></li>
      <li><a href="credits">Credits</a></li>
    </ul>
  </nav>

Yes its a website about Caillou, I have too for a school project

CodePudding user response：

I recommend using the percentage attribute in a css class, like:

img {
    width: 100%;
    height: 100%;
}

if it's only on mobile devices you could make use of the media query:

@media screen and (min-width: 992px) {
   img {
    width: 100%;
    height: 100%;
  }
}

Edit: based on new code and with a random image to represent.

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}


header{
  margin: 0 auto;
  justify-content: center;
  width: 100%;
  height: 200px;
}

header img{
  display:flex;
  width: 100%;
  height: 100%;
}

<header>
    <h1 >Welcome to caillou.tk!</h1>
    <a href="/"><img src="https://www.intz.com.br/wp-content/uploads/wallpapers/WallpaperLiquifyUltraWide.png" alt="Caillou Logo"></a>

  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="https://www.youtube.com/channel/UC4yQCVlLhTmOqX5kUkAGr0g">Watch</a></li>
      <li><a href="characters">Characters</a></li>
      <li><a href="about">About Caillou</a></li>
      <li><a href="credits">Credits</a></li>
    </ul>
  </nav>

CodePudding user response：

If it's a background image, you can use this CSS:

#image {
    min-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}

The overflow will be cut off so that the user isn't able to scroll. (Assuming image is the id of your image)

CodePudding user response：

You can use:

img {
  width: 100vw;
}

CodePudding user response：

use width in percentage

img {
   width: 100%;
   height: 100%;
}