在圖像上更改CSS高度不起作用？

我不能改變高度只有寬度的作品？我不明白:)在圖像上更改CSS高度不起作用？

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

進出口使用引導我不會有什麼與我的問題？爲什麼整個圖像改變大小，當我只是改變寬度。

來源

2016-12-14 Mattias S. Nordell

具有u試圖與像素您定義的屬性'class'兩次在標籤'img'而不是CSS – Jagadeesh

：''。你必須決定它是縮略圖還是img響應 – Banzay

這是因爲包含IMG山口沒有高度，你不能給％的價值形象，因爲家長沒有任何高度得到50％！另一方面，你可以使「px」成爲可能;

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

或加高度的集裝箱山口

來源

2016-12-14 11:30:59

你應該設置特定的高度圖像的父（CLASS = COL-MD-12）

例如：

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

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

來源

2016-12-14 11:29:02 Hezron

我們可以通過設置高像素，將工作

.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個你必須設置position:absolute到圖像像

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

來源

2016-12-14 11:29:34

你應該首先分配給一個孩子之前提供高度的父母。你還沒有設置父母的身高。即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>

我不支持內聯樣式。

來源

2016-12-14 11:30:05

您可以使用CSS樣式

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

來源

2016-12-14 11:30:15

在圖像上更改CSS高度不起作用？

回答

相關問題