Question

大家好我是html的新手，我正在为我班级的网站项目工作。我的问题是每当我放大图像向左或向右移动时。我怎样才能留下来。谢谢！

Heres My 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;




}

Answer 1

您遇到的主要问题是，当您放大时，浏览器窗口的像素宽度正在调整大小。

图像本身左边距较大。

你的问题的解决方案是一个CSS网格，其中有很多。（Bootstrap，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>

注意：您的网站访问者在查看您的网站时可能会有不同的分辨率。我建议您不要放大网站，使用开发工具包，谷歌浏览器有一个很棒的检查工具包，可以在不同的屏幕分辨率下查看您的网站。网格系统还可以使您的网站移动友好。

放大后图像移动

1 个答案: