ズームしたときに画像が移動する

こんにちは、私は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のなど）

Aは非常に軽量で使いやすい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>

。注意：あなたのサイトを表示するときにあなたのサイトの訪問者は、異なる解像度を持っているかもしれません。私は、あなたのサイトを拡大する代わりに、デベロッパーキットを使用することをお勧めします。google chromeは、さまざまな画面解像度でサイトを確認するための素晴らしい検査キットを用意しています。グリッドシステムはまた、あなたのサイトをモバイルフレンドリーにします。

出典

2016-11-07 17:27:24

ズームしたときに画像が移動する

答えて

関連する問題