Why is my image not covering the whole browser? - html

Question

I'm having an issue where some images are not covering the entire width of the browser and some images are just too large to the point where you have to scroll right to see the entire image. I am using background-size:cover and I tried background-size: auto 100%; because that fixed it for some people. I want the background below my navbar to be an image, can someone help me understand why I am unable to achieve this?
<nav>
<ul class="navbar-list">
<li class="navbar-items">Home</li>
<li class="navbar-items">About</li>
<li class="navbar-items">Basics</li>
<li class="navbar-items">Contact</li>
</ul>
</nav>
<div class="body-img">
<img
src= "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="sorry it looks like something went wrong."
/>
</div>
for my css I use : body-img img { background-size: cover; }

Answer 1

Set the width of body-img to width:100vw
You can also remove the padding and margin in the page using:
* {
padding: 0;
margin: 0;
}

Answer 2

Try it by using Flex.
.d-flex {
display: flex;
flex-flow: column;
height: 100vh;
}
.body-img {
flex: 1;
height: 100%;
}
.body-img img {
height: 100%;
width: 100%;
}
Html codes are like that.
<div class="d-flex">
<nav>
<ul class="navbar-list">
<li class="navbar-items">Home</li>
<li class="navbar-items">About</li>
<li class="navbar-items">Basics</li>
<li class="navbar-items">Contact</li>
</ul>
</nav>
<div class="body-img">
<img
src= "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="sorry it looks like something went wrong."
/>
</div>
</div>
If you don't want the image stretching, remove width property.

Answer 3

Many problems with this.
.body-image img{
background-size:cover;
}
The img tag is not considered a container. Therefore background-size:cover; is not a appropriate style property for it.
If you intended to use a image as a background for a container; in this scenario a div element. You would call the image url through CSS vs using a img tag.
.body-image{
background-image: url('');
background-size: cover;
}
But wait this is still incomplete in order to scale the whole window size. Containers with no set width inherit the property width:auto;, so we will need to set the width of the container.
.body-image{
background-image: url('');
background-size: cover;
width:100%;
display:flex;
}
If you still insisted to keep a img tag. You would only need to set the width of both the container and the img tag.
so this code will also work for your desired effect.
.body-image{
display:flex;
width:100%;
}
.body-image img{
width:100%;
}