画像上のCSSの高さを変更できないのですか？

Question

高さを変更することはできません幅のみが動作しますか？私は理解しない:)ブートストラップを使用して

.image-size{ 
 
    width: 100%; 
 
    height: 50%; 
 
}

<div class="container"> 
 
    
 
    <div class="row"> 
 
    <div class="page-header"> 
 
    
 
    <div class="col-md-8"> 
 
    <nav class="navbar navbar-default navbar"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">Lexicon</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#">Java Fundamentals</a></li> 
 
     <li><a href="#">Java Advanced</a></li> 
 
     <li><a href="#">Front-End</a></li> 
 
     <li><a href="#">Test and Management</a></li> 
 
     <li><a href="#">Java Enterprise</a></li> 
 
     
 
    </ul> 
 
    </div> 
 
</nav> 
 
    </div> 
 
    </div> 
 
    
 
    
 
    <div class="jumbotron"> 
 
<div class="row"> 
 
    <div class="col-md-12" align="center"> 
 
    <img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size"> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

イム私は私の問題とは何がありますか？なぜ画像全体のサイズが変わるのですか？

Answer 1

を使用することができますそれの50％を得る！一方、 では "px"を使用することができます。

.image-size{ 
    width: 100%; 
    height: 250px; 
} 

またはコンテナコル

Answer 2

あなたが例えば画像の親のための特定の高さ（クラス= COL-MD-12）

を設定する必要があります。

.col-md-12{ 
    height: 100px; 
} 

.image-size{ 
    width: 100%; 
    height: 50%; 
    display: block; 
} 

Answer 3

我々は、高さのピクセルを設定することができ、それは

.image-size { 
 
    height:300px; 
 
    width :100%; 
 
}

<div class="col-md-12" align="center"> 
 
    <img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size"> 
 
</div>

に動作します

そして、高さwを設定したい場合i番目の割合は、あなたが

.image-size { 
 
    height:50%; 
 
    width:100%; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
}

<div class="col-md-12" align="center"> 
 
    <img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size"> 
 
</div>

Answer 4

のような画像にposition:absoluteを設定する必要があなたの最初の子に割り当てる前に、親への高さを提供する必要があります。 親の高さを設定していません。つまりdivの高さを指定すると、50％の意味を知ることができます。

<div class="col-md-12" align="center" style='height:100px'> 
    <img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size"> 
</div> 

インラインスタイリングはサポートされていません。

Answer 5

あなたはIMGが含まれているコルは、高さを持っていないと親がに任意の高さを持っていないので、あなたがイメージに％値を与えることができないので、それがあるCSSスタイル

.thumbnail, .image-size, src { 
    height: 50%; 
    width: 100% 
}