html - 使图像高度适合屏幕

Question

我在 Bootstrap 代码中有一个图像

<header>
My Header
</header>

<div class="container">

<div class="col-md-8">
<div class="col-image">
<img src="my-image.jpg" >
<div>
</div><!--col-md-8-->

<div>
comments
</div>


<div class="col-md-4">
my sidebar
</div><!--col-md-4-->

</div><!--container-->

<footer>
my footer
</footer>

我希望图像高度在任何尺寸的屏幕内。响应高度

我尝试添加 height:auto; max-height:100vh; 但根本不起作用。任何帮助都是适当的。

Answer 1

图像 parent 应该定义高度。因此，您可以设置最大高度或高度。以百分比搜索高度 ;)

PS.: 看全页

.col-image{
  height: 100vh;
  border: 1px solid red;
}
img{
  float:left;
  max-height: 100%;
  height: 100%
}

<header>
My Header
</header>

<div class="container">

<div class="col-md-8">
<div class="col-image">
<img src="http://papodeturista.com/wp-content/uploads/2016/02/arvore.jpg" >
<div>
</div><!--col-md-8-->

<div>
comments
</div>


<div class="col-md-4">
my sidebar
</div><!--col-md-4-->

</div><!--container-->

<footer>
my footer
</footer>