放大時圖像移動

嗨，大家好我是新來的HTML和我正在爲我的課的網站項目工作。我的問題是每當我放大我的圖像向左或向右移動。我怎樣才能讓它留下來。謝謝！放大時圖像移動

我的繼承人HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Ghost - Home</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet"> 

</head> 
<!-- Ghost Logo --> 
<center><img src="images/gh_logo.png" alt="GH Logo" style="width:138px;height:198px;"></center> 
<!-- End Ghost Logo --> 
<img src="images/band_photo2.png" class="band-img" alt="image"/> 

<div id="container">

CSS

body { 

    background-image: url(../images/topback_gh2.png); 
    background-position: center top; 
    background-repeat: no-repeat; 
    z-index: 0; 
} 

.band-img { 
    background-repeat: no-repeat; 
    position: absolute; 
    margin-top: -50px; 
    margin-left: 439px; 




}

來源

2016-11-07 Zach Taurosa

您遇到的主要問題是因爲你的瀏覽器的像素寬度，當你在縮放窗口大小調整的。

圖像本身有一個很大的左邊距。

您的問題的解決方案是一個CSS網格，其中有很多。（引導，simplegrid等）

一個非常輕便和易於使用的是Simplegrid

<div class="grid"> 
<div class="col-8-12"> 
<!-- content for large column here --> 
</div> 
<div class="col-4-12"> 
<!-- content for small column here --> 
</div> 
</div>

注：查看自己的網站時，您的網站的訪客可能有不同的分辨率。我建議您不要放大您的網站，使用開發人員工具包，谷歌瀏覽器有一個很棒的檢查工具包，用於根據不同的屏幕分辨率檢查您的網站。網格系統也使您的網站移動友好。

來源

2016-11-07 17:27:24

放大時圖像移動

回答

相關問題