Image gets bigger than a div container with a border and overflows

Question

here's a simple problem for you to solve. The image should be 90vw and the container should add a border to the image.

The border can't be applied directly to the image, since the image in further steps of coding will have some style directly applied to the html.

The current implementation causes the border to be smaller than the image. How can it wraps nicely around the image?

I really want something simple to keep it light and easy to understand for a newbie like me, so please no codes that do triple flips and pike jumps with gentle, graceful landings like I usually see on Stack Overflow.

HTML:

<div id="main-image-container-slideshow">
   <img id="main-image-slideshow" src="http://localhost:8888/image/jpeg/campus1.jpg">
</div>

CSS:

#main-image-container-slideshow {
    border: 5px solid black;
}

#main-image-slideshow {
    width: 90vw;
}

Answer 1

I would make the container be 90vw AND have the container have the border. The image would then be the full width of the 90vw container. I made the image a block to remove any potential unwanted space underneath.

#main-image-container-slideshow 
{   border: 5px solid black;
    box-sizing: border-box;
    width: 90vw;

/* If you want the container to be centered, add this, otherwise skip */
    margin: 0 auto;

}

#main-image-slideshow 
{
    width: 100%;
    display: block;
}