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%);
}

希望这对你有帮助..