即使屏幕分辨率发生变化，如何使图像在页面上移动

Question

I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?

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

maybe set initial left and top values

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

Answer 2

Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.

Pop this on your .content div:

position: relative;

the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.

If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:

left: calc(100% - 100px)

...where 100px is the width of the element.

edit: jsfiddle example https://jsfiddle.net/w56r2xnr/

Answer 3

Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).

You can now adjust the top to make it as you see fit.

CSS changes:

 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;}
    }

Sample: http://codepen.io/Nasir_T/pen/ZBpjpw Hope this helps.

[Edit - Code changed in question]

I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute . Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.

For the updated code in question please check the following code sample:

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

Just adjust the key frame left percentage according to your need.