影像在調整CSS大小時下移-有解無憂

我想要做的就是將個人資料圖片影像放在文本的一側并將其保留在那里。但是，當視窗處于全尺寸時，影像會向下移動并離開塊，如鏈接中所示。我已經嘗試了很多不同的解決方案，但似乎都沒有奏效，非常感謝您的幫助。謝謝。

這是鏈接：https : //codepen.io/Tantlu/full/JjyVrZZ

CSS 代碼：

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;}
}

HTML直到影像代碼：

<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>

uj5u.com熱心網友回復：

我添加display: flex;到您的block-light班級并將所有內容對齊到中心。此外，為了更好的措施，我添加了一個名為left避免字間距的類，我補充說text-align: center;你可以做任何事情。我建議使用media queries調整回應式設計的所有適用元素的大小。此外，還添加flex-direction: column;了media queries

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;
  }
}



.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下面800像素。

uj5u.com熱心網友回復：

float:right當有足夠的文本“浮動”在影像周圍時，影像已設定好，并且可能是您想要的。所以在較窄的視口上看起來不錯。

在寬螢屏上，它仍然向右浮動，但沒有足夠的文字環繞它。

同樣作為浮動，它不會設定其容器的高度。

讓系統在繪制下一個元素之前“清除”文本和影像的一種方法是使用 clear: both

在您的情況下clear: both，在 .px2 的 CSS 中放置一個

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362743.html

標籤：html css 图片图像大小调整代码笔

上一篇：如何從Observable中提取資料

下一篇：在Javascript中設定影像的寬度和高度