更改图像大小时，图像在屏幕上移动

这是我的网站：https://katekarate.github.io/My-Site/.

云图像还可以，但当我改变窗口大小时，彩虹图像正在移动。我只是个初学者，不明白为什么会发生这种事。。求你了，救命！

body {
margin: 0 auto;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0 auto 0 auto;
font-family: 'Charmonman', cursive;
font-size: 5.6rem;
color: #11999E;
line-height: 1.2;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 2rem;
color: #11999E;
font-weight: normal;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #30E3CA;
}
a {
color: #30E3CA;
text-decoration: none;
margin: 20px;
}
a:hover {
color: #E4F9F5;
}
hr {
margin: 50px auto;
border-bottom: none;
border-top: 7px dotted #EAF6F6;
width: 5%;
}
.top-container {
background-color: #E4F9F5;
position: relative;
}
.bottom-container {
background-color: #11999E;
position: relative;
padding: 30px;
}
.contact-me {
width: 50%;
margin: 100px auto;
line-height: 2;
}
.footer-end {
color: white;
font-size: 0.8rem;
}
.top-cloud {
position: relative;
top: 100px;
left: 300px;
width: 150px;
height: 150px;
}
.bottom-cloud {
position: relative;
bottom: 300px;
right: 50px;
width: 150px;
height: 150px;
}
.skill-row {
width: 50%;
margin: 100px auto;
text-align: left;
line-height: 2;
}
.profile-img {
width: 20%;
margin-top: 50px;
}
.coding-img {
width: 25%;
float: left;
margin-right: 30px;
}
.teacher-img {
width: 25%;
float: right;
margin-left: 30px;
}
.btn {
background: #11cdd4;
background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
background-image: -o-linear-gradient(top, #11cdd4, #11999e);
background-image: linear-gradient(to bottom, #11cdd4, #11999e);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #30e3cb;
background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
text-decoration: none;
}

<title>Kate Hyrenko</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Charmonman&amp;family=Merriweather&amp;family=Montserrat&amp;display=swap" rel="stylesheet">
<div class="top-container">
<img class="top-cloud" src="images/cloud1.png" alt="cloud1-img">
<h1>I'm Kate .</h1>
<h2>a web developer.</h2>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
<div class="profile">
<img class="profile-img" src="images/girl.png" alt="profile-img">
<h2>Hello.</h2>
<p>I am actually an ESL teacher, who has just become a web developer.</p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="coding-img" src="images/coding.png" alt="coding-img">
<h3>Coding &amp; debugging</h3>
<p>I am really interested in coding! I like HTML and CSS. I don’t understand JavaScript just yet, but I’m on my way to excellence. I like debugging my own work, because I can fix all my mistakes by my own!</p>
</div>
<div class="skill-row">
<img class="teacher-img" src="images/teacher.png" alt="teacher-img">
<h3>Educating developing minds</h3>
<p>Yes, it is stressful to be a teacher, yes I often complained, yes there’s a lot of work you have to do at home… But you can change someone’s life and teach kindness and compassion. It’s a priceless experience.</p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>I’m currently available for freelance work or internship.</h3>
<p>If you are looking for someone who is still learning or just want to say hey, get in touch!</p>
<a class="btn" href="mailto:katya.gyrenko@gmail.com">CONTACT ME</a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/in/kate-hyrenko-30116a177/">LinkedIn</a>
<a class="footer-link" href="https://www.instagram.com/katya_gyrenko/">Instagram</a>
<a class="footer-link" href="https://www.facebook.com/katya.gyrenko/">Facebook</a>
<p class="footer-end">© 2022 Kate Hyrenko</p>
</div>
<div style="position: static !important;"></div>

修复我认为最简单的修复方法是在rainbow图像上使用absolute位置而不是relative。

.bottom-cloud {
position: absolute;
left: calc(50% - 400px);
}

在位置为absolute的情况下，元素将相对于其父relative容器进行定位。(对于relative，它的位置相对于它自己的初始位置，这是我在调整屏幕大小时更改的(

问题问题是.bottom-cloud处于相对位置，这意味着当该元素的初始位置发生变化时，图像也会发生偏移。

在您的html中，您有两个图像-rainbow和mountain。在大屏幕上，它们将在一行中渲染，但在小屏幕上，图像将分成两行，然后您的bottom、right值不再有效：

<!--
big screen, 
images in a single line, 
`bottom` and `right` configured correctly
-->
<img>rainbow</img> <img>mountain</img> 

<!--
small screen,
images in 2 lines now as there is not enough space to keep them in a single line,
now `bottom` and `right` configured incorrectly, because initial position of the rainbow element was changed
-->
<img>rainbow</img>
<img>mountain</img>

你能用这个替换你的代码吗？您应该使用CSS选择器。

.bottom-cloud {
position: relative;
right: 250px;
width: 150px;
height: 150px;
top: 250px; 
}

<div class="top-container">
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img class="top-cloud" src="images/cloud1.png" alt="cloud-img">
<h1>I'm Kate .</h1>
<h2>a web developer.</h2>
<img src="images/mountain.png" alt="mountain-img">
</div>

实际上，直到屏幕大小小于770px，图像才会移动。是否涉及设置断点的媒体查询？

不太确定你想要实现什么，但你可以通过添加以下额外的CSS来在较小的屏幕上以不同的方式处理图像位置。

了解有关媒体查询的更多信息。

在这个例子中，当屏幕大小低于770px时，我将图像居中：

@media (max-width: 770px) {
.button-cloud {
width: 200px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
}

我只是在谷歌上搜索了一下，找到了这些推荐的断点：

576px用于人像手机
片剂768px
992px用于笔记本电脑
1200px用于大型设备

相关内容

最新更新

热门标签：