使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。

Answer 2

如果您想在图像上添加边框，请将其添加到

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: inline-block;
  line-height: 0;
  margin: 0 auto;*/
  top: 50%;
  transform: translateY(-50%);
  text-align: center; /*center image horizontally*/
}

#imagewrap img {
  border: 1px solid white;
}

<div id="header"> </div>
<div id="container">
  <div id="imagewrap">
    <img src="https://unsplash.it/100/100" height="100%" id="front" />
  </div>
</div>
<div id="footer"> </div>

Answer 3

看看这个fidde： https://jsfiddle.net/56myv9g2/1/

#imagewrap img{
  display:block;
}

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

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

此外，你可以直接给图像标签边框，而不是div

Answer 4

如果设置display：inline-block，则需要将text-align: center添加到容器

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 {
  text-align: center;
  height: 80%;
  width: 100vw;
  background-color: red;
}

#imagewrap{
    position: relative;
	border: 1px solid white;
	width: 430px;
	display: inline-block;
	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>