修改图像的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>

我正在使用Bootstrap，这与我的问题有关吗？为什么当我只改变宽度时，整个图像的大小都会改变。

- Mattias S. Nordell

---

你尝试过使用像素而不是CSS吗？ - Jagadeesh

你在标签img中重复定义了属性class：<img class="thumbnail image-size" src="... ..." class="img-responsive image-size">。你必须决定它是缩略图还是响应式图片。 - Banzay

Answer 1

你需要为图像的父元素（class=col-md-12）设置具体高度。

例如：

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

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

- Hezron

Answer 2

这是因为包含img的Col没有高度，你不能给图片一个百分比值，因为父元素没有任何高度来获取50％！换句话说，您可以使用“px”使其成为可能；

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

或者为容器列添加高度

- Mohammad.Gh

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>

- Jishnu V S

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>

我不支持内联样式。

- tango bango

Answer 5

你可以使用 CSS 样式

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

- kishan kakadiya