使图像高度适合屏幕内部

Question

我在引导代码中有一个图像

<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; height:auto; max-height:100vh; 但根本没有工作。 任何帮助都是适当的。

Answer 1

图像父级应定义为高度。 因此，您可以设置max-height或height。 以百分比搜索heitgh;）

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> 

Answer 2

添加类img-response。

<img src="my-image.jpg" class="img-responsive" />

此处更多信息： Bootstrap映像