放大时图像移动

嗨，大家好我是新来的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

放大时图像移动

回答

相关问题