图像变得比带边框的 div 容器大并溢出

Question

这里有一个简单的问题需要您解决。图片应为 90vw，容器应为图片添加边框。

边框不能直接应用于图像，因为在进一步的编码步骤中，图像的某些样式将直接应用于 html。

当前的实现导致边框小于图像。怎样才能很好地包裹图像？

我真的想要一些简单的东西，让它像我这样的新手保持轻便和容易理解，所以请不要像我通常在 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

我会让容器为 90vw 并让容器有边框。然后图像将是 90vw 容器的整个宽度。我将图像制作成一个块，以删除下面任何可能不需要的 space。

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

Answer 2

您可以将包装器的 display 属性设置为 flex 并将 flex-direction 属性设置为 column。而且，如果您决定更改图像的宽度，则不必更改 CSS 中的 display 属性。

#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>

代码段中使用的图片是在 freepik 找到的。

Answer 3

您可以将容器宽度设置为 100vw，将图像宽度设置为容器宽度的 90%，即 90vw。

.image-container {
  width: 100vw;
  border: 5px solid #000000;
}
.image {
  width: 90%;
}

<div class="image-container">
      <img src="https://Whosebug.design/assets/img/logos/so/logo-Whosebug.png" class="image"/>
</div>

图像变得比带边框的 div 容器大并溢出

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

html

css

border