CODEWITHSUNDEEP
htmlcssborder
Kyle
Kyle

Reputation: 133

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

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;
}

Upvotes: 1

Views: 393

Answers (3)

YeetYeet
YeetYeet

Reputation: 100

You can set the display property of the wrapper to flex and set the flex-direction property to column. And, if you decide to change the width of the image, then you won't have to change the display property in CSS. 

#main-image-container-slideshow {
  display: flex;
  flex-direction: column;
  border: 2px solid white;
}

#img {
  width: 90vw;
}

html {
  background-color: black; /* sets the background color to black to make it easier to see the border */
}
<div id="main-image-container-slideshow">
   <img id="main-image-slideshow" src="https://img.freepik.com/free-photo/wall-wallpaper-concrete-colored-   painted-textured-concept_53876-31799.jpg?size=626&ext=jpg">
</div>

The image used in the code snippet was found at freepik.

Upvotes: 1

Dark shadow
Dark shadow

Reputation: 225

You can set the container width to 100vw and image width to 90% of the container's width which is equivalent to 90vw.

.image-container {
  width: 100vw;
  border: 5px solid #000000;
}
.image {
  width: 90%;
}
<div class="image-container">
      <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" class="image"/>
</div>

Upvotes: 0

Sivak
Sivak

Reputation: 168

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;
}

Upvotes: 2

Related Questions