即使屏幕分辨率發生變化，我如何讓圖像在整個頁面上移動

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

你。內容和.container沒有位置設置，所以我想這是默認爲有這些設置的下一個父元素。

彈出這對你。內容的div：

position: relative; 

圖像仍然要去了，因爲左邊的極限：100％，但增加的相對位置的容器可能幫助你到達下一個問題。

如果你想要的形象坐在與容器的邊緣，而不是運行在同花順，你也可以改變你的左邊：100％：

left: calc(100% - 100px) 

...其中100像素的寬度元素。

編輯：例如的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類。我一直保持5px的頂部，這爲內容div中的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:relative，以保持其內包含的圖像本身position:absolute圖像。除此之外，無論屏幕大小如何，您都需要使用左側和頂部的百分比值，以便動畫和位置位於正確的位置。

對於疑問，請查看下面的代碼示例更新後的代碼：

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

只要調整根據您的需要留個關鍵幀。