display:inline-block;width:100%;img width:100%:height:auto;top:-50%;

Question

 <style type="text/css">
.embed-responsive{position:relative;width:100%;height:0;padding:0;overflow:hidden;}
/*自定义宽高比例   4：3    可以根据实际情况修改，多写几个*/
.embed-responsive-4by3{padding-bottom:75%;}

/*当不确定高度或者宽度是否会超出时使用*/
.embed-responsive-img-default{position:absolute;top:0;left:0;width:100%;min-height:100%;}

/*当确定高度会超出时使用*/
.height-middle{position:absolute;top:50%;left:0;width:100%;height:auto;display:inline-block;}
.embed-responsive-img-hm{position:relative;top:-50%;width:100%;}


/*当确定高度会超出时使用*/
.width-middle{position:absolute;left:50%;width:auto;height:100%;display:inline-block;}
.embed-responsive-img-wm{height:100%;margin-left:-50%;}
</style>



<div style="width:300px;">
<!--demo  当确定高度一定会超出时，并且希望图片在height上居中显示-->
<div class="embed-responsive embed-responsive-4by3">
     <div class="height-middle">
         <img class="embed-responsive-img embed-responsive-img-hm" src="picture.jpg" alt="" title="" />
        </div>
    </div>

</div>

 我用父元素继承width:100%;display:inline-block; 子元素是img width:100%;height:auto;
这样父元素就能获取到子元素的高度
然后我用子元素position:relative; top:-50%；

可是为什么top:-50%;无效

 google浏览器上面盒子模型显示的有top 并且有正确的值  但是网页中并没有进行渲染？？？

Answer 1

姜维 2016-08-29 15:18:38

.height-middle 里面设置的 height: auto 是没有用的，和没有设置height一样。必要要明确设置一个高度，子元素的定位才起效果。

• 提问者 咕咕问 #1

  非常感谢！

Answer 2

提问者 咕咕问 2016-08-30 08:25:14

teacher，我是再改网站的模板，我的想法是根据网站中某个栏目显示的大多数的图片宽高比例作为依据，然后通过自适应，根据获得的宽度和设定的宽高比例作为图片展示的框子并且overflow:hidden，图片width 或者 height 100%继承，然后让超出的部分进行居中显示（例如：图片width:100%;height超出框子的高度值，那么就让图片从中心位置进行显示）。width没问题，在图片height:100%;继承的情况下可以将父元素display：inline-block；撑开，但是width:100%;的情况下height撑不开了。   有没有什么办法解决一下。

• 姜维 #1

  可以参考一下这个解决方案：
  https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div