使div的宽度等于它包含的图像的宽度
问题描述：
这里的另一个新手问题。学习CSS。我正在尝试做一些我认为会很简单的事情，但还没有设法找到解决方法，或者找到合适的答案。使div的宽度等于它包含的图像的宽度
我有一个标题，一些内容和页脚的简单项目。内容有一个带白色边框的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>
答
您.imagewrap加入display: inline-block;没有设置它的宽度。
.imagewrap {
display: inline-block;
}
如果你想用图像一个div为中心，再添DIV他们周围：
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
但你真的需要在图像周围div？边框可能会添加到图像本身，无需额外的div。
答
看看这个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
答
如果你想在图像上的边框，添加它有
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>
答
如果设置显示：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;
\t border: 1px solid white;
\t width: 430px;
\t display: inline-block;
\t 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>