如何将图像保持在相对于屏幕尺寸的位置

Question

我正在尝试将图像相对于屏幕的宽度和高度保持在适当的位置，而不会扭曲图像。我是HTML和CSS的新手，并且已经在网上四处看看，但是我似乎想不出一个对我有帮助的解决方案。

This是网站当前的样子

.background .top img {
  width: 350px;
  height: auto;
  display: block;
  margin: 7% 40vw 0 40vw;
  position: fixed;
}

<link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">
<div class="background">
  <div class="top">
    <img src="https://i.gyazo.com/6b4879127e032e75fbd44521893576e3.png" alt="Panda">
  </div>
  <div class="bottom">
    <p>Hi, Im <span>James</span>.</p>
  </div>
</div>

无论屏幕的高度或宽度如何变化，我都希望它像过去一样一直悬在黑色部分上

Answer 1

仅以百分比设置width属性即可。