cssflexbox影像大小奇怪地變化

我開始使用來自舊的 stackoverflow 問題的現有模板測驗 Flexbox

HTML

.flex-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.kutu {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<section class="team ">
  <header class="exp">

  </header>
  <div class="flex-items">

    <div class="kutu">
      <h2>Temsilci</h2>

      <div>
        <img src="/images/ben.png" alt="">
        <h4>Umutcan <span class="text-primary">"??????????????"</span> Adiguzel</h4>
      </div>

      <div>
        <img src="/images/kaan.png" alt="">
        <h4>Ahmet Kaan <span class="text-primary">"kargolar seffaf mi"</span> Aslan</h4>
      </div>

    </div>

    <div class="kutu">
      <h2>Bas kole</h2>

      <div>
        <img src="" alt="">
        <h4>Ismail Emre <span class="text-primary">"Emre"</span> Gunes</h4>
      </div>

    </div>

    <div class="kutu">
      <h2>Avusturya Temsilcisi</h2>

      <div>
        <img src="" alt="">
        <h4>Hayri Cem <span class="text-primary">"hayry"</span> Adiguzel</h4>
      </div>

    </div>

    <div class="kutu">
      <h2>Avcilar Yonetim Birligi Uyesi</h2>

      <div>
        <img src="" alt="">
        <h4>Mehmet Ali <span class="text-primary">"ali58"</span> Kuzu</h4>
      </div>

      <div>
        <img src="" alt="">
        <h4>Anil <span class="text-primary">"anil"</span> Akyil</h4>
      </div>

    </div>

    <div class="kutu">
      <h2>Eskortlar Odasi Esbaskan Vekili</h2>

      <div>
        <img src="/images/burak.png" alt="">
        <h4>Burak <span class="text-primary">"yarrak gurmesi ekmen"</span> Colakoglu</h4>
      </div>

    </div>

    <div class="kutu">
      <h2>Lezbiyen Haklari Koruma Birligi Uyesi</h2>

      <div>
        <img src="" alt="">
        <h4>Ugur <span class="text-primary">"bardo"</span> Yengil</h4>
      </div>

      <div>
        <img src="/images/cenker.png" alt="">
        <h4>Cenker <span class="text-primary">"ceko an?lelifbar??s?no?ullar?31"</span> Goksu</h4>
      </div>

      <div>
        <img src="/images/canemir.png" alt="">
        <h4>Canemir <span class="text-primary">"Gay Emir"</span> Ozdemir</h4>
      </div>

      <div>
        <img src="/images/denizbora.png" alt="">
        <h4>Deniz Bora <span class="text-primary">"dbe"</span> Ekiz</h4>
      </div>

      <div>
        <img src="/images/kutay.png" alt="">
        <h4>Mehmet Kutay <span class="text-primary">"kutii"</span> Keklik</h4>
      </div>

      <div>
        <img src="/images/gokdeniz.png" alt="">
        <h4>gokdeniz <span class="text-primary">"an?llaelifevlensin"</span> Dincer</h4>
      </div>

    </div>

    <div class="kutu">
      <h2>Kaymakam Kalem Muduru</h2>

      <div>
        <img src="/images/ilker.png" alt="">
        <h4>Ilker <span class="text-primary">"aktif gay"</span> Tari</h4>
      </div>

    </div>

    <div class="kutu">
      <h2>Muhtarlar</h2>

      <div>
        <img src="" alt="">
        <h4>Muhammed Can <span class="text-primary">"s2m2m7"</span> Adiguzel</h4>`enter code here`
      </div>

      <div>
        <img src="" alt="">
        <h4>Metehan <span class="text-primary">"Its mother fucking ghost"</span> Adiguzel</h4>
      </div>

      <div>
        <img src="" alt="">
        <h4>Enes <span class="text-primary">"Suprise"</span> Adiguzel</h4>
      </div>

    </div>









  </div>
</section>

CSS flexbox 影像大小發生了奇怪的變化，如果您能提供幫助，我將不勝感激

uj5u.com熱心網友回復：

我不明白，如果您不希望尺寸發生變化，請在影像中放置固定的寬度和高度，例如寬度：50％高度：50％。這可能是因為每個影像具有不同的大小。我建議還在 h4 或包含兩者的 div 中放置一個固定寬度。

        .flex-items {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          height: 100%;
        }
        
        .kutu {
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
        }
    
        img { 
        width: 20%;
        height: 20%;}

       .kutu div { width: 40%;}

標籤：css 图片 弹性盒

上一篇：即使在Flutter中定義了errorBuilder，Image.network也會拋出錯誤

下一篇：如何使用PIL.ImageDraw.Draw.text設定錨點以適合影像中心的文本？