Question

我的图像从屏幕的一侧到另一侧。但是，当我在不同尺寸的计算机/笔记本电脑上打开HTML时，它不适合并且看起来不合适。我该如何解决这个问题？

CODE：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

可能设置初始左侧和顶部值

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

Answer 2

您的.content和.container没有设置位置，所以我猜这是默认为具有这些设置的下一个父元素。

在你的.content div上弹出这个：

position: relative;

由于左图，图像仍然会超出限制：100％但是向容器添加相对位置可能会帮助您解决下一个问题。

如果您希望图像与容器边缘齐平而不是跑过来，您也可以将左侧：100％更改为：

left: calc(100% - 100px)

...其中100px是元素的宽度。

编辑：jsfiddle示例https://jsfiddle.net/w56r2xnr/

Answer 3

尝试以下我推荐过的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设置内容div，以便将图像保留在其中，因为图像本身为position:absolute。除此之外，您需要使用左侧和顶部的百分比值，以便动画和位置在正确的位置，而不管屏幕的大小。

有关更新的相关代码，请查看以下代码示例：

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

只需根据需要调整关键帧剩余百分比。

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

3 个答案: