Creating a line composed of 3 divs containing each a picture of the same size-CodePudding

First post here so i hope it's understandable for you guys (and girls). Don't hesitate to give advice if there are ways i could have done it with more clarity.

I'm trying to create a navbar composed of 3 clickable pictures. I want every of the 3 pictures to be the same size but my code doesn't work and the picture gets too big. Can't figure out why ?

    #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 ><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" id="tattoo"></div>
        <div ><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" id="iIllustration" ></div>
        <div ><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg"  id="objet"></div>
    </div>

CodePudding user response：

Using the display: flex; settings applies to the children of the parent, and not to the grandchildren, I simply deleted the divs that wrapped the images, and gave 100% height and width settings to html & body

 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  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  src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" id="iIllustration" >
        <img  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>

CodePudding user response：

One approach is as below, with some explanatory comments in the 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 ><img src="//via.placeholder.com/300/ff0000/ffffff?text=one" id="tattoo"></div>
  <div ><img src="//via.placeholder.com/500/00ff00/ffffff?text=two" id="iIllustration"></div>
  <div ><img src="//via.placeholder.com/800/0000ff/ffffff?text=three" id="objet"></div>
</div>

CodePudding user response：

Try changing width and height to max-width and max-height and see if that works for you.

EDIT: Please give this a try, update your css to the following

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