图像在调整大小时向下移动 CSS

Question

我想做的就是将个人资料图片放在文本的一侧并让它留在那儿。但是，当 window 为全尺寸时，图像会向下移动并离开块，如 link 中所示。我尝试了很多不同的解决方案并且 none 似乎有效，非常感谢您的帮助。谢谢

这里是link：https://codepen.io/Tantlu/full/JjyVrZZ

body, html, main {
  height: 100%;
  font-size: 10px;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.header {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Lexend', sans-serif;
}

h1 {
  font-size: 6rem;
  text-transform: uppercase;
  letter-spacing: 3.5px;
}

h2 {
  font-size: 2rem;
  letter-spacing: 1rem;
}

h3 {
  text-transform: uppercase;
  font-size: 3rem;
  font-family: 'Lexend', sans-serif;
  text-align: center;
}

p {
  font-size: 2rem;
  font-weight: 100;
  text-align: justify;
}

.img1 {
  width: 25%;
  border-radius: 50%;
  margin-left: 5%;
  float: right;
}

/* Blocks */

.block {
  padding: 70px 150px;
}

.block-light {
  background-color: #fff;
  color: black; 
}

.block-dark {
  background-color: #080c14;
  color: white;  
}

/* Parrallax */

.px1, .px2, .px3 {
  position: relative;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.px1 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://64.media.tumblr.com/e5bfc63c34477d3e1b648a4f09aa9afb/tumblr_p5lsy5Ac1H1uhx88zo1_500.gifv');
  min-height: 100%;
}

.px2 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://www.wallpaperflare.com/static/155/335/658/digital-art-artwork-landscape-sword-wallpaper.jpg);
  min-height: 400px;
}

.px3 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://mocah.org/uploads/posts/583541-sword-art-online.jpg);
  min-height: 400px;
}

@media(max-width: 568px) {
  .px1, .px2, .px3{background-attachment: scroll;}
}

<main id="main">

<div class="px1">
  <div class="header">
    <h2>手塚 治虫</h2>
    <h1 id="title">Osamu Tezuka</h1>
  </div>
</div>

<div class="block block-light">
  <h3>The father of anime</h3>
  <img class="img1" src="https://www.otaquest.com/wp-content/uploads/2020/03/osamu-tezuka-01.jpg"/>
  <p>Known as the Godfather of Manga and Anime, Osamu Tezuka (手塚 治虫) was born 3rd November, 1928 and died February 9th, 1989. Tezuka was a Japanese manga artist, animator and cartoonist. In 1968 he founded Tezuka Productions Co (手塚プロダクション) and Mushi Productions.</p>
</div>

<div class="px2">
  <span class="border">
    Sword Art Online
  </span>
</div>

Answer 1

我将 display: flex; 添加到您的 block-light class 并将所有内容对齐到中心。另外，为了好的措施，我添加了一个名为 left 的 class 来避免单词间距，我添加了 text-align: center; 你可以做任何事情。我建议使用 media queries 来调整响应式设计的所有适用元素的大小。此外，在 media queries

中添加了 flex-direction: column;

body, html, main {
  height: 100%;
  font-size: 10px;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.header {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Lexend', sans-serif;
}

h1 {
  font-size: 6rem;
  text-transform: uppercase;
  letter-spacing: 3.5px;
}

h2 {
  font-size: 2rem;
  letter-spacing: 1rem;
}

h3 {
  text-transform: uppercase;
  font-size: 3rem;
  font-family: 'Lexend', sans-serif;
  text-align: center;
}

p {
  font-size: 1.7rem;
  font-weight: 100;
  text-align: left;
}

.left {
  margin-left: 1.5rem;
}

/* media queries */
@media only screen and (max-width: 850px) {
  .left {
    text-align: : center;
  }
  .block-light {
    background-color: #fff;
    color: black; 
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* img resizing -> min-width: 178px */
  .img1 {
    min-width: 178px !important;
    min-height: auto;
  }
}



.img1 {
  width: 25%;
  border-radius: 50%;
  margin-left: 5%;
  float: right;
}

/* Blocks */

.block {
  padding: 70px 150px;
}

.block-light {
  background-color: #fff;
  color: black; 
  display: flex;
  align-items: center;
}

.block-dark {
  background-color: #080c14;
  color: white;  
}

/* Parrallax */

.px1, .px2, .px3 {
  position: relative;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.px1 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://64.media.tumblr.com/e5bfc63c34477d3e1b648a4f09aa9afb/tumblr_p5lsy5Ac1H1uhx88zo1_500.gifv');
  min-height: 100%;
}

.px2 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://www.wallpaperflare.com/static/155/335/658/digital-art-artwork-landscape-sword-wallpaper.jpg);
  min-height: 400px;
}

.px3 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://mocah.org/uploads/posts/583541-sword-art-online.jpg);
  min-height: 400px;
}

@media(max-width: 568px) {
  .px1, .px2, .px3{background-attachment: scroll;}
}

<main id="main">

<div class="px1">
  <div class="header">
    <h2>手塚 治虫</h2>
    <h1 id="title">Osamu Tezuka</h1>
  </div>
</div>

<div class="block block-light">
  <h3>The father of anime</h3>
  <img class="img1" src="https://www.otaquest.com/wp-content/uploads/2020/03/osamu-tezuka-01.jpg"/>
  <p class="left">Known as the Godfather of Manga and Anime, Osamu Tezuka (手塚 治虫) was born 3rd November, 1928 and died February 9th, 1989. Tezuka was a Japanese manga artist, animator and cartoonist. In 1968 he founded Tezuka Productions Co (手塚プロダクション) and Mushi Productions.</p>
</div>

<div class="px2">
  <span class="border">
    Sword Art Online
  </span>
</div>

点击整页

编辑： - 添加了一个示例 media query，将 font-size 更改为 850 像素以下。

Answer 2

图像有 float:right 设置，这很好，可能是您想要的，当有足够的文本 'float' 围绕图像时。所以它在较窄的视口上看起来还不错。

在宽屏幕上，它仍然向右浮动，但没有足够的文字环绕它。

同样作为浮动，它不设置其容器的高度。

让系统在绘制下一个元素之前 'clear' 文本和图像的一种方法是使用 clear: both

在你的情况下，在 .px2

的 CSS 中放一个 clear: both

图像在调整大小时向下移动 CSS

Image Moves Down on Resize CSS

html

css

image

image-resizing

codepen