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

希望这会对你有帮助..

以绝对div为中心的绝对img，感觉就像我尝试了一切

1 个答案: