改变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

这是因为包含img的Col没有高度，而且您不能给图像%值，因为父程序没有任何高度来获得其中的50%！另一方面，你可以用“px”来实现；

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

或增加容器高度

Answer 2

您应该为映像的父级设置特定的高度(class=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>

​

如果要用百分比设置高度，则必须将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>

​