屏幕尺寸变化时如何保持图像原位？ HTML/CSS答案

【问题标题】：How to keep the image in place when screen size changes? HMTL/CSS屏幕尺寸变化时如何保持图像原位？ HTML/CSS
【发布时间】：2022-01-02 17:50:53
【问题描述】：

我正在尝试制作一个带有标题和标题右侧图像的 html 标题。但是当屏幕尺寸改变时，图像会在标题上滑动。如何让它留在它的位置？我已经尝试了所有我能想到的，但没有运气。我想出的最好的方法是图像位于标题下方。然后它保持它的位置。但我宁愿把它放在一边。

这是我的代码：

<body>
  <header>
        <h1>Title text</h1>
        <p>some text</p>
        <div class="picture">
          <img src="assets/images/xxxx.png">
        </div>
      </header>
some code ....
</body>

以及style.css中的header部分：

header { padding: 25px 20px 40px 20px; margin: 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; text-align: center; background: #15253e; box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); z-index: 99; -webkit-font-smoothing: antialiased; min-height: 76px; }
header h1 { font: 42px/50px 'Copse', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #f3f3f3; text-shadow: 0px 2px 0px #235796; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; }
header p { color: #f3f3f3; text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; font-size: 20px; margin: 10px; }
header img { width: 60px; height: 100px; position: fixed; right: 900px; top: 15px; text-align: right; }
header .picture { display: block; }

我会添加一张图片，但我没有这样做的权利。所以这里有一个页面an example，它可能会让我不了解我想要做什么。有一个标题和一个箭头图像的图片。我的目标是在标题文本的右侧获取图像。如果屏幕尺寸发生变化，请保留它。

【问题讨论】：

请提供更多详细信息和minimal reproducible example。
对不起，我不知道还有什么细节？有header部分和img？
例如你想要的结果是什么，你会得到什么，提供一个可行的例子。没有人知道你想要什么，所以如果你需要一些帮助，你必须提供更多的帮助。如果您对如何提问有疑问，请阅读How to Ask
css boxäshadow 不存在。而且您没有关闭您的img 元素（缺少>）
我想要标题右侧的标题中的图像。现在，当屏幕尺寸发生变化时，图像会浮在标题上。我不知道如何更清楚地说明这一点。

标签： html css image position

【解决方案1】：

我真的希望现在就是这样：

我把整个内容都放在了flexbox，所以很容易对齐。您可以修改标题的justify-content 或align-items 以稍微改变布局。

#title 内部的text-align 也可以更改为center 或left。

我知道在代码预览中它看起来很大，但在全屏时它可以工作。您可以更改header 中的height 以消除该问题。

html,
body {
  margin: 0;
}

header {
  padding: 20px 40px;
  background-color: gray;
  width: 100%;
  top: 0;
  position: sticky;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  max-height: 30vh;
}

#title {
  text-align: right;
}

header h1 {
  font: 42px/50px 'Copse', "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #f3f3f3;
  text-shadow: 0px 2px 0px #235796;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}

header p {
  color: #f3f3f3;
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
  font-size: 20px;
  margin: 0;
}

header img {
  height: 20vh;
}

<html>

<body>

  <header>
    <div id="title">
      <h1>Title text</h1>
      <p>some text</p>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png">
  </header>
  <div>
    spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
  </div>
</body>

</html>

【讨论】：

试过了。如果屏幕尺寸变小，Stills 会向左移动。我再次编辑了这个问题。 Coudn 没有提供图片（没有权利），但添加了一个链接是一张类似于我正在尝试做的图片。除了箭头图像在左侧，我想要图像在右侧。
如果侧面向下滚动，标题会发生什么？它应该停留在屏幕顶部吗？
标题保留在原位。
看我改了，这样你就可以看到滚动效果了

【解决方案2】：

您为标题text-align: center; 设置了一个属性，它使您的图像居中对齐，因为它是内联元素。你有很多选择来改变它：

设置text-align: right;
把你的图片放到像<div>这样的块元素中
将图像的属性更改为阻止或弯曲...例如：display: block; 并使用float:right 更改 div 的位置
其他东西

看例子W3school

使用像Codepen这样的沙盒

【讨论】：