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 - 修復圖像無論窗口大小如何

回答

相關問題