使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

看看这个乐趣： 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>