divの幅を画像の幅と同じにします

Question

もう1つの初心者の質問はここにあります。 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

それは幅だ設定せずに、あなたの.imagewrapにdisplay: inline-block;を追加します。あなたがイメージを持つdiv要素を中央に配置したい場合は

.imagewrap { 
    display: inline-block; 
} 

、と彼らの周りに別のdivを追加します。

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

しかし、あなたは本当に画像の周りdivことが必要なのですか？ボーダーは、追加のdivなしで画像自体に追加される可能性があります。

Answer 2

この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 3

なく、すべてに沿って、画像タグにボーダーを与えることができますそこ

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 4

使用すると、表示設定した場合：インラインブロックを、そしてあなたは、コンテナ

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>

に text-align: centerを追加する必要があります