javascript - 响应式地将绝对 img 置于绝对 div 中，感觉就像我尝试了一切

Question

在您将其标记为重复之前，我已经浏览了几个小时以寻找解决方案，但没有一个适合我。

我有一个绝对定位的 div (#hero-img) 作为背景容器，里面有一个 img(使用真实背景不是一个选项，因为我使用的是带有淡入淡出的 jQuery 循环)。

这是我最终确定的几乎的作品:

HTML:

<div id="hero-img">
    <img src="img/heros/hero-img.jpg" />
</div>

CSS:

#hero-img {
    position: absolute;
    margin: 0 auto;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#hero-img img {
    width: 100%;
    height: auto;
    position: absolute;
    margin: 0 auto;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
}

JS:

var w = window.innerWidth;
var h = window.innerHeight;

if( w / h < 1650 / 1050 ) {
    $('#hero-img img').css("height", "100%");
    $('#hero-img img').css("width", "auto");
}
else {
    $('#hero-img img').css("width", "100%");
    $('#hero-img img').css("height", "auto");
}

这似乎在窗口宽时有效，但在移动设备大小时无效。

您可以访问 kylebashour.com/carlex 查看我的意思。

我试过 左:50%； margin-left:(图像宽度的一半)；但它在某些尺寸下将它推得太远(我想是因为宽度可能是自动的..)

如有任何帮助，我们将不胜感激!

Answer 1

对于水平居中，请在您的 img CSS 代码中尝试:

#hero-img img{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
}

此外，如果你想要垂直和水平居中，试试这个:

#hero-img img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

希望这对你有帮助..