画面の解像度が変わっても画像をページ全体に移動するにはどうすればいいですか

Question

画面の片面から他の面に行く画像があります。しかし、私は別のサイズのコンピュータ/ラップトップでHTMLを開くと、それは適合していないと外見になります。これをどうやって解決するのですか？

はCODE：

body { 
 
    text-align: center; 
 
} 
 
div.container { 
 
    text-align: left; 
 
    width: 710px; 
 
    margin: 0 auto; 
 
    border: 12px solid black; 
 
    border-radius: 10px; 
 
} 
 
div.content { 
 
    width: 700px; 
 
    min-height: 400px; 
 
    background-color: white; 
 
    padding: 5px; 
 
} 
 
@-webkit-keyframes mini { 
 
    from { 
 
    left: 410px; 
 
    } 
 
} 
 
.mini { 
 
    position: absolute; 
 
    top: 280px; 
 
    left: 950px; 
 
    width: 166px; 
 
    height: 70px; 
 
    z-index: 10000; 
 
    -webkit-animation: mini 3s; 
 
    animation: mini 8s; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <img src="Media/buscartoon.jpg" class="mini" /> 
 
    </div> 
 
</div>

Answer 1

あなた.contentと.containerには位置が設定されていないので、私はそれがだと思いますこれらのセットを持つ次の親要素にデフォルト設定されます。画像がまだあるため、左側の限界を乗り越えるために起こっている

position: relative; 

：

あなた.content divの上でこれをポップ100％が、コンテナに相対的な位置を追加するだけでなく、あなたがに得るのを助けることが次の問題。

あなたがイメージがコンテナの端ではなく、オーバーランニングと同一平面に座るしたい場合は、左手を変更することができます：100％まで：100ピクセルの幅である

left: calc(100% - 100px) 

...要素。

編集：jsfiddle例https://jsfiddle.net/w56r2xnr/

Answer 2

多分、設定された初期の左と上の値

.imganim { 
     width:100px; 
     height:60px; 
     position:absolute; 
     -webkit-animation:myfirst 5s; 
     animation:myfirst 5s; 
     left: 0; 
     top: 0; 
    } 

Answer 3

私はammendedしている以下のCSSクラスを試してみてください。私はコンテンツのdiv内の5pxのパディングのためのスペースを作る5pxでトップを維持しています。また、50％変換形式には、左の100％ - （画像の幅+右パディング）が含まれます。

上部が調整できるようになりました。

CSSの変更：

div.content { 
    width: 700px; min-height: 400px; 
    background-color: white; padding: 5px; 
    position: relative; 
} 

    /* Chrome, Safari, Opera */ 
    @-webkit-keyframes myfirst 
    { 
     0% {left:0%; top:5px;} 
     50% {left: calc(100% - 105px);} 
     100% {left:0%; top:5px;} 
    } 

    /* Standard syntax */ 
    @keyframes myfirst 
    { 
     0% { left:0%; top:5px;} 
     50% {left: calc(100% - 105px);} 
     100% {left:0%; top:5px;} 
    } 

サンプル：http://codepen.io/Nasir_T/pen/ZBpjpw は、この情報がお役に立てば幸いです。

[編集 - コードは、問題の変更]

私はあなたがイメージ自体がposition:absoluteであるとして、その中に含まれる画像を維持するためにposition:relativeでコンテンツのdivを設定する必要があります両方のシナリオではと思います。それに加えて、画面のサイズに関係なく、アニメーションと位置が正しい場所にくるように、左と上のパーセント値を使用する必要があります。問題の更新されたコードのために

次のコードサンプルを確認してください。

http://codepen.io/Nasir_T/pen/ObRwmO

をちょうどあなたの必要性に応じて割合を左にキーフレームを調整します。