图片不根据浏览器大小动态定位

Question

当移动浏览器处于横向模式时，图像或任何元素未自行定位：

HTML代码：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
</head>
<style>
body{
background: url("bimg.jpg");
margin:0;
background-size: cover;
background-repeat: no-repeat;
}
</style>
<body>
<img src="image.png" style="position:relative;top:300px; left:550px;">
</body>
</html>

我的浏览器截图：

普通模式：

横向模式：

Answer 1

它准确地定位在您指定的位置：距屏幕顶部 300 像素和距屏幕左侧 550 像素。如果你想将它定位到中心使用：

<img src="image.png" style="position:relative;top:300px; margin: 0 auto;">

或者如果您知道图像宽度，例如：100px，您可以将其居中对齐：

<img src="image.png" style="position:relative;top:300px; left:50%; margin-left: -50px;">

margin-left -50px 是图像宽度 (100px) 的一半。

Answer 2

Florin Pop 说的是真的。此外，如果您想将元素水平居中并且不知道它的宽度，您可以使用以下代码片段之一：

<div style="text-align: center;">
  <div style="display: inline-block;">123</div>
</div>

或对于较新的浏览器：

<div style="position: absolute; left: 50%; transform: translateX(-50%);">123</div>

图片不根据浏览器大小动态定位

Image not positioning dynamically according to the browser size

html

css

image

background-image