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

【问题标题】：How to keep an image in place relative to screen size如何将图像保持在相对于屏幕尺寸的位置
【发布时间】：2019-01-18 01:46:38
【问题描述】：

我正在尝试将图像保持在相对于屏幕宽度和高度的位置，而不会扭曲图像。我是 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>

无论屏幕的高度或宽度发生什么变化，我都希望它保持原样悬挂在黑色部分上

【问题讨论】：

这不是我做的吗？
分享您的 HTML 和其他任何内容。您是否尝试过在缩小屏幕尺寸时查看它的样子？
尝试使用 sn-p 或代码笔来分享您的示例，以便我们可以在屏幕尺寸更改时看到问题.. 堆栈溢出的用户通常很懒，并且想做一些小腿工作尽可能
我尝试查看缩小屏幕尺寸时的样子，图像不会停留在屏幕中心，好像边距不存在某种方式，如果我使用 codepen 我不能保留我的本地图像，这是问题所在
我包含了我所有的html

标签： html css

【解决方案1】：

只需以百分比设置宽度属性即可。

【讨论】：

不行，图片会缩小，不会停留在黑线上