Question

我成功地使用 .center-block 类来获取img水平对齐但是对于vertically center aligned我看似异常的结果。任何人都可以告诉代码有什么问题吗？

<style>
   .center-y{vertical-align:middle;}
</style>

<div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 ">
      <img class="animated center-block img-responsive center-y" src="website%20logo.png" alt="logo" onload="animate_in();" width="800" height="600"  id="img_logo" onclick="animate_out();" />
   </div>
</div>

这是JSFiddle

更新

我想出了一种使用纯CSS的方法，即

<style>
  img{
     max-height: 90%;
     max-width: 90%;
     position: absolute;
     top: 0;
     bottom: 0;               
     left: 0;
     right: 0;             
     margin: auto;                
     border: 2px solid rgb(44,44,44);                           
   }


</style>
  <img class="animated" src="website%20logo.png" alt="logo" onload="animate_in();" width="800" height="600" id="img_logo" onclick="animate_out();" />

以下是JSfiddle

效果很好，但是你看到图像不再响应？ :)那么如何通过引入Bootstrap类img-responsive来实现同样的目的呢？

Answer 1

所以我用JQuery来解决它，它的解决方案很简单，使用Jquery。仍然想知道是否有css方式来实现它;）

以下是解决方案代码：

 $( window ).on('load resize',function() {
                    window_size = $(window).height();
                    img_ht= $('#img_logo').height();

                    difference_ht=(window_size) - (img_ht);
                    console.log(difference_ht);
                    margin_ht=(difference_ht/2).toFixed();
                    margin_ht+="px";
                    $("#img_logo").css({"margin-top": margin_ht});
            });

和JSFiddle

响应式图像在Bootstrap中垂直对齐

更新

1 个答案: