Изменение высоты 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>

Im используя загрузчик делает я иметь ничего общего с моей проблемой? Почему изменяется размер всего изображения, когда я просто изменяю ширину.

Answer 1

это потому, Col, которые содержат IMG не имеет высоту, и вы не можете дать% значения изображение, потому что родитель не имеет высоты до получите 50% от этого! в другой руке вы можете сделать это с помощью «px»;

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

Или добавить высота контейнера Col

Answer 2

Вы должны установить определенную высоту для родительского образа (класс = кол-мкр-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 процент Ith вы должны установить 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>

Answer 4

Вы должны обеспечить высоту родительскому первым перед назначением ребенка. Вы не установили родительскую высоту. т. е. высота 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

вы можете использовать стиль CSS

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