Question

http://jsfiddle.net/ChilledMonkeyBrain/x0jocsec/1/

^ jsfiddle link ^我使用一个小的jq脚本获取视口尺寸并重新缩放背景图像以适应。我遇到的问题是div（.png），我想在背景上垂直和水平居中，而不管视口尺寸如何。目前的风格使其在移动人像上太高，在移动设备上太低。尝试了许多不同的单位和价值观。是否有一种适合所有人的风格＆＃39;解决方案，还是我需要继续使用媒体查询进行调整？

谢谢！

<div class="hero"> 
<img class="logo" id="biglogo" src="http://www.seomofo.com/downloads/new-google-logo-knockoff.png">

       </div> 

$(document).ready(function () {
  $(window).bind('resizeEnd', function () {
    $(".hero").height($(window).height());
  });

  $(window).resize(function () {
    if (this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function () {
      $(this).trigger('resizeEnd');
    }, 300);
  }).trigger("resize");
});
/////
window.addEventListener("load", function(){
    var load_screen = document.getElementById("load_screen");
    document.body.removeChild(load_screen);
});

.hero
{   
    background-color: black;
    background-image: url(https://unsplash.imgix.net/photo-1419064642531-e575728395f2?q=75&fm=jpg&s=490dffe2e11f468947891ab40651e176) ;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-position: 50% 50%;
}

#biglogo {
    display: block;
    position: fixed;
    max-width: 50%;     
    margin: 25% 25%;  /*??*/
    z-index: 5;
}

Answer 1

HMM。我做了这种事情已经有一段时间了，但是在固定元素的情况下，我认为你需要在上面代码的最后部分中使用这样的东西。

width: 50%; /*??*/
height: 25%;
margin-top: 50%;
top: -25%;
margin-left: 50%;
left: -25%;

更新了fiddle

修改：此处的评论是一个新的fiddle，其中包含一个包装类，可帮助您定位图像。

Answer 2

实现此目标的最简单方法是使用transform，今天它得到了相当好的支持（Can I Use）

#biglogo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transform-style: preserve-3d;
    width: 100%;
    height: auto;
    max-width: 200px;
}

http://jsfiddle.net/3pwpny33/1/

集中精力。 Div / img总是垂直和水平中心覆盖大小背景？

2 个答案: