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

来源

2017-02-27 Paul

您.imagewrap加入display: inline-block;没有设置它的宽度。

.imagewrap { 
    display: inline-block; 
}

如果你想用图像一个div为中心，再添DIV他们周围：

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

但你真的需要在图像周围div？边框可能会添加到图像本身，无需额外的div。

来源

2017-02-27 13:40:50 Plenarto

看看这个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

来源

2017-02-27 13:46:06

如果你想在图像上的边框，添加它有

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>

来源

2017-02-27 13:47:20 pol

如果设置显示：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>

来源

2017-02-27 13:48:01 Banzay

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

回答

相关问题