創建由3個div組成的行，每個div包含相同大小的圖片

第一次在這里發帖，所以我希望你們（和女孩）可以理解。如果有辦法我可以更清楚地做到這一點，請不要猶豫提供建議。

我正在嘗試創建一個由 3 張可點擊圖片組成的導航欄。我希望這 3 張圖片中的每一張都具有相同的大小，但是我的代碼不起作用并且圖片變得太大。想不通為什么？

    #navbar {    
    display: flex;
    flex-direction: row ;
    justify-content: space-around;
    width: 100%;
    margin: 0% auto 10% 20%;
    }
    
    .bouton {  
    width: 30%;
    height: 30%;
    object-fit: contain;

 <div id="navbar">
        <div class="bouton"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" id="tattoo"></div>
        <div class="bouton"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" id="iIllustration" ></div>
        <div class="bouton"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg"  id="objet"></div>
    </div>  

uj5u.com熱心網友回復：

使用這些display: flex;設定適用于父母的孩子，而不是孫子女，我只是洗掉了包裝影像的 div，并為 html 和 body 提供了 100% 的高度和寬度設定

 html, body {
    width: 100%;
    height: 100%;
 }
 
 #navbar {    
    display: flex;
    flex-direction: row ;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    margin: 0% auto 10% 20%;
}
    
.bouton {  
    padding: 5%;
    width: 30%;
    height: 30%;
 }

   <div id="navbar">
        <img class="bouton" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" id="tattoo">
        <img class="bouton" src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" id="iIllustration" >
        <img class="bouton" src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"  id="objet"></div>
    </div> 

uj5u.com熱心網友回復：

一種方法如下，在 CSS 中有一些解釋性注釋：

#navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.bouton {
  /* specify the size/width of the flex-items; here
     we use calc() to have the .bouton elements
     fill the available space of the parent: */
  flex-basis: calc(100% / 3);
}

img {
  /* have the <img> fill its parent: */
  width: 100%;
  /* apply object-fit to the <img>: */
  object-fit: contain;
}

<div id="navbar">
  <div class="bouton"><img src="//via.placeholder.com/300/ff0000/ffffff?text=one" id="tattoo"></div>
  <div class="bouton"><img src="//via.placeholder.com/500/00ff00/ffffff?text=two" id="iIllustration"></div>
  <div class="bouton"><img src="//via.placeholder.com/800/0000ff/ffffff?text=three" id="objet"></div>
</div>

uj5u.com熱心網友回復：

嘗試將寬度和高度更改為最大寬度和最大高度，看看是否適合您。

編輯：請試一試，將您的 css 更新為以下

 html, body {
    width: 100%;
    height: 100%;
 }
 
 #navbar {    
    display: flex;
    flex-direction: row ;
    justify-content: space-around;
    width: 100%;
    height: 100%;
}
    
.bouton {  
    padding: 5%;
    width: 30%;
    height: 30%;
 }

.bouton > img {
  width:100%;
}

標籤：htmlcss弹性盒

上一篇：我正在嘗試使用HTML畫布進行音頻可視化

下一篇：僅在Safari/Mac上的文本裝飾線未對齊