我正在尝试制作一个响应式网站。我正在尝试，如果分辨率发生变化，我的文字将保留在我的照片下方。 (例如，如果有人调整了他们的网络浏览器的大小。)我的第一个问题，如果格式错误，我深表歉意。感谢您花时间阅读和帮助! (请注意，如果需要所有代码，我只添加了针对此问题的 HTML 和 CSS，我可以发布 GitHub 链接。)
HTML:
<body>
<div class="Mid">
<div id="TopLeft">
Daniel Apacik
</div>
<div id="Selfie">
<img src="images/me.jpg" alt="Photo of Daniel Apacik">
</div>
<div id="About">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto pariatur atque excepturi id vero voluptatibus iste commodi. Necessitatibus atque illo itaque officia exercitationem maiores culpa molestiae ipsa. Voluptates, iste magni.
</div>
<div id="TopRight">
Projects | Contact
</div>
</div>
</body>
CSS:
.Mid {
background: url(images/midback2.png) center;
background-size: cover;
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 1000px;
font-size: 16px;
height: 2em;
padding: 0%;
margin: 0%;
min-height: 100vh;
min-width: 100vw;
}
.Mid #TopLeft{
position: absolute;
top: 8px;
left: 16px;
font-family: Helvetica;
}
.Mid #Selfie img{
display: block;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -100px;
}
.Mid #TopRight {
position: absolute;
top: 3%;
right: 3%;
font-family: Helvetica, Arial, sans-serif
}
.Mid #About {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
text-align: center;
max-width: 20%;
}
最佳答案
欢迎使用 StackOverflow。
理想情况下，您应该提供带有公开图像的工作示例，但我已经使用我发现的一片叶子的随机图像重新创建了您的示例。
我看到的最大问题是您的定位完全错误。如果对所有内容都使用绝对定位，那么响应式设计永远走不远。
相反，您应该从使用文档的自然流动以及 CSS 技术来调整位置开始。在这种情况下，您似乎正在尝试让图像后跟一段文本，并且您希望两者都居中。在 CSS 中有一些居中技术。在这里，我使用了经典的 margin: 0 auto 属性来创建自动居中的边距。
body {
background-color: black;
min-height: 100vh;
min-width: 100vw;
color: white;
font-family: Helvetica, Arial, sans-serif;
}
#topLeft {
font-family: Helvetica, Arial, sans-serif;
}
#selfie img {
display: block;
border-radius: 50%;
margin: 0 auto;
height:100px;
width:auto;
}
#topRight {
position: absolute;
top: 3%;
right: 3%;
font-family: Helvetica, Arial, sans-serif
}
#about {
display: block;
text-align: center;
padding: 10px;
padding-left: 3em;
padding-right: 3em;
margin: 0 auto;
}<body>
<div id="topLeft">
Daniel Apacik
</div>
<div id="selfie">
<img src="https://www.woodlandtrust.org.uk/media/100758176/whitebeam-leaf-paul-sterry-NPL.jpg" alt="Example photo">
</div>
<div id="about">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto pariatur atque excepturi id vero voluptatibus iste commodi. Necessitatibus atque illo itaque officia exercitationem maiores culpa molestiae ipsa. Voluptates, iste magni.
</div>
<div id="topRight">
Projects | Contact
</div
</body>我建议您阅读 CSS 技术。一个好的开始是 CSS 技巧。他们对所有事情都有很好的指导centering with CSS例如。
但作为一般规则，请始终避免任何假定宽度的定位。将相对位置与 HTML 中的顺序、百分比、计算等一起使用。当您确实需要将样式限制为特定屏幕尺寸时，您可以使用 media queries。
关于css - 当分辨率发生变化时需要帮助将我的文字置于图像下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55404174/