使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的寬度等於它包含的圖像的寬度

回答

相關問題