[英]make image height fit inside the screen
我在引導代碼中有一個圖像
<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;
但根本沒有工作。 任何幫助都是適當的。
圖像父級應定義為高度。 因此,您可以設置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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.