2016-11-03 15 views
1

私のウェブページに画像があります。画像は独自のdivにあり、私はそれを定位置に置いています:ページ上のどこに移動するか(大体右上隅)。私の問題は、私がページをズームアウトすると、イメージが右に表示されなくなり、最終的にページの左上/上の中央に表示されてしまうことです。ズームアウト時に私のページの段落が展開されていますが、それはそれ自身のdivとイメージの下にありますが、それは無関係かもしれませんが、ズームアウト時に画像がその位置にとどまるようにしたいので、常に正しい位置にとどまるようにズームします。 Googleとの例:100%ズームでの右にあるボックスにズームイン/アウト時にウェブページの右上に画像を保存するにはどうすればいいですか?

星座:まだ右隅にボックス内のhttps://snag.gy/9oMGVr.jpg

ログインズームアウト:https://snag.gy/FXArO4.jpg

は私のイメージと同じことをやりたいです、浮動小数点:right6は動作していないようです。 事前に感謝します。

+0

なぜあなたは彼らがあなたのブラウザでそれを行う方法を見つけるために、GoogleのウェブサイトのHTML/CSSを検査しませんか? – Goombah

答えて

0

see the fiddle

重要と思うです:

position: fixed; 
    right:0; 
    top:0; 

は、必ずそのは応答デザインが表示されますTOP_RIGHT隅に

を配置し、HTMLで<meta name="viewport" content="width=device-width, initial-scale=1.0">に適用

reference

<html> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <head> 
 
    <style> 
 
     .top_right{ 
 
    position: fixed; 
 
width:70px; 
 
height:30px; 
 
margin:10px 5px auto; 
 
background-color:blue;color:white; 
 
right:0; 
 
top:0; 
 
box-sizing:border-box; 
 
border:none; 
 
} 
 
</style> 
 
    </head> 
 
    <body> 
 
<button class="top_right"> 
 
SignIn 
 
</button> 
 
    </body> 
 
    </html>

0

固定の配置を使用すると、ブラウザまたはビューポートに相対的な位置に留まるはずです。

0

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="col-xs-12"> 
 
<img class="pull-right img-responsive" src="images/img_c_2.jpg" /> 
 
</div> 
 
    </body>

関連する問題