Bild bewegt sich beim Vergrößern

Hallo Leute, ich bin neu in HTML und ich arbeite an einem Website-Projekt für meine Klasse. Mein Problem ist, wenn ich mein Bild zoome nach links oder rechts bewegt. Wie kann ich es bleiben lassen? Vielen Dank!Bild bewegt sich beim Vergrößern

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




}

Quelle

2016-11-07 Zach Taurosa

Das Hauptproblem Sie haben, ist wegen der Pixelbreite Ihres Browser-Fenster Größe ändern, wenn Sie in zoomen.

Sie haben einen großen linken Rand auf dem Bild selbst.

Die Lösung für Ihr Problem ist ein CSS-Gitter, von denen es viele gibt. (Bootstrap, simplegrid etc.)

Ein sehr leicht und einfach zu bedienen ist der 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>

Hinweis: Besucher Ihrer Website können unterschiedliche Auflösungen haben, wenn Ihre Seite. Ich würde vorschlagen, anstatt Sie auf Ihrer Website zu zoomen, dass Sie das Entwicklerkit verwenden, Google Chrome ein großes Inspektions-Kit für die Überprüfung Ihrer Website auf anderen Bildschirmauflösungen. Ein Grid-System macht Ihre Website auch mobilfreundlich.

Quelle

2016-11-07 17:27:24

Bild bewegt sich beim Vergrößern

Antwort

Verwandte Themen