Question

我无法改变高度只有宽度有效？我不明白:)）

＆＃13;

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

＆＃13;

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

＆＃13;

我使用bootstrap我与我的问题有什么关系吗？当我改变宽度时，为什么整个图像会改变大小。

Answer 1

您应该为图像的父级设置特定高度（class = col-md-12）

例如：

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

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

Answer 2

这是因为包含img的Col没有高度，你不能给图像赋予％值，因为父级没有任何高度可以获得50％的高度！另一方面，你可以使用“px”;

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

或者为容器Col添加高度

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>

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%
}

更改图像上的CSS高度不起作用？

5 个答案: