Question

现在正在做一个全新的网站。 Haven还没有编码任何东西，只是在研究阶段。您知道图像将如何在您的计算机或电视屏幕上显示它会变得更大，而不是以变焦的方式变得更大，就像图像朝向您的方式一样？你会怎么称呼它？我想做相反的事情，让它看起来像我在屏幕上的背景，所以图像在技术上会变得更小，但会有一种3D感觉，就好像它越走越远远。任何人都可以帮助我找到我应该寻找的东西吗？谢谢！

Answer 1

你的意思是响应式图像的效果吗？ Bootstrap使用<img class="img-responsive" src="...">来创建响应式图像。下面是一个例子。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Image</h2>
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

Answer 2

trasnform: scale()会像您描述的那样。

img {
  max-width: 100%;
  animation: scale 3s forwards;
  transform-origin: 50% 0;
}

@keyframes scale {
  to {
    transform: scale(0);
  }
}

<img src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg">

如何将图片从我的视角移动到屏幕上（右边描述？）

2 个答案: