使 div 的宽度等于它包含的图像的宽度

Question

另一个新手问题。学习CSS。我正在尝试做一些我认为非常简单的事情，但尚未设法找到方法或问题的合适答案。

我有一个带有页眉、一些内容和页脚的简单项目。内容有一个带有白色边框的 div，里面有一个图像。我希望 div 与图像一样宽，而不是更宽。我暂时将宽度设置为 430px，但我想知道将宽度设置为任何图像宽度的代码。

代码

html

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#footer {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#container {
  height: 80%;
  width: 100vw;
  background-color: red;
}

#imagewrap {
  position: relative;
  border: 1px solid white;
  width: 430px;
  display: block;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

<div id="header"> </div>
<div id="container">
  <div id="imagewrap">
    <img src="Images/01Folder/Image.jpg" height="100%" id="front" />
  </div>
</div>
<div id="footer"> </div>

Answer 1

添加display: inline-block;到您的.imagewrap而不设置它的宽度。

.imagewrap {
  display: inline-block;
}

如果您想要一个带有图像的 div 居中，请在它们周围添加另一个 div：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
} 

但是你真的需要div围绕图像吗？边框可以添加到图像本身而无需额外的div.