JavaScript - 修复图像无论窗口大小如何

图像正在移动取决于屏幕的大小，我想修复它在顶部中间。我该怎么做？这里是2个截图说明：JavaScript - 修复图像无论窗口大小如何

HTML：

<div class="logo"></div>

CSS：

.logo { 
    background:url(../img/logo.png) no-repeat; 
    position:absolute; 
    display: inline-block; 
    left:50%; 
    top:30%; 
    height:120px; 
    width:175px; 
    margin:-115px 0px 0px -112px; 
}

来源

2016-12-17 Marcelo Almeida

CSS：.logo { 背景：网址（../ IMG/logo.png）不重复; position：absolute; \t display：inline-block; 剩余：50％; top：30％; height：120px; width：175px; margin：-115px 0px 0px -112px; } –

乍看之下，它看起来像是图像都太左 - 你的左边距（-112像素）看起来适合比你有更宽的图像。我会尝试更改为-88px的左边距，看看它是否看起来更好。 –

您可以使用翻译：

.logo { 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, 0); 
    height:120px;     
    width:175px;  
    background:url(../img/logo.png) no-repeat; 
}

jsFiddle

来源

2016-12-17 02:30:06

可以在CSS使用calc功能。

调整窗口大小以查看其效果（全屏显示）。

.logo{ 
 
    position: absolute; 
 
    width: 175px; 
 
    height: 120px; 
 
    top: 30%; 
 
    left: calc(50% - (175px/2)); /* 50% parent width - half_of_image_width */ 
 
    
 
    border: 1px solid red; 
 
} 
 

 
.container{ 
 
    position: absolute; 
 
    width: 90%; 
 
    height: 90%; 
 
    
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    <div class="logo"></div> 
 
</div>

来源

2016-12-17 02:35:59

JavaScript - 修复图像无论窗口大小如何

回答

相关问题