Fit and re-size properly an image inside a div-CodePudding

For a project, I need to reproduce the following picture. Almost everything is ok, but I have a problem with my pictures. Firs of all, the white border that I added overflow from the 'box', futhermore I can't properly re-size the images, so that they can fit inside the div.

I have tried to manipulate the width and heigh with the values of auto, max-cotent, min-content, 100%... but either the image takes too much place (wrapping don't work), either it doesn't properly resize itself.

Here is my code:

#accommodation-content{
    display: flex;
    flex-flow: row wrap;
}

#acccommodation-city{
    flex-grow: 2;
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    padding: 16px 0px px 16px;
    margin-right: 16px;
    margin-left: 16px;
}

#accommodation-nav{
    display: flex;
    flex-flow: row wrap;
}

#accommodation-nav > div {
    flex: 33%;
}

.accommodation-item{
    background-color: white;
    border-radius: 10px;
    box-shadow: 10px 5px 5px #E0DDDD;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: min-content;
}

.accommodation-picture{
    border: 3px solid white;
    border-radius: 10px;
    height: max-content;
    width: 100%;
}

#accommodation-popular{
    flex-grow: 1;
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    padding: 16px 0px 0px 16px;
}

#popular-nav{
    display: flex;
    flex-flow: column wrap;
}

.popular-item{
    background-color: white;
    border-radius: 10px;
    box-shadow: 10px 5px 5px #E0DDDD;
    margin-right: 10px;
    margin-bottom: 10px;
}

 <link rel="stylesheet" href="https://fonts.googleapis.com/ 
                              css?family=Raleway">
<script src="https://kit.fontawesome.com/         
                     1f544e41e8.js" crossorigin="anonymous"></script>

<div id="accommodation-content">
  <div id="acccommodation-city">
    <h3>Accommodations in Marseille</h3>
    
    <div id="accommodation-nav">
      
      <div >
        <img  
               src="https://i.stack.imgur.com/Mbjwm.jpg">
        <h5>Auberge la Cannebière</h5>
        <p>Night starting at <strong>25€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #dfdddd;" ></i>
        </div>
      
      <div >
        <h5>Hôtel du port</h5>
        <p>Night starting at <strong>25€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        </div>
      
      <div >
        <h5>Les mouettes Hotel</h5>
        <p>Night starting at <strong>76€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #dfdddd;" ></i>
        </div>
      
      <div >
        <h5>Hôtel de la mer</h5>
        <p>Night starting at <strong>46€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #dfdddd;" ></i>
        <i style="color: #dfdddd;" ></i>
        </div>
      
      <div >
        <h5>Auberge Le Panier</h5>
        <p>Night starting at <strong>23€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #dfdddd;" ></i>
        </div>
      
      <div >
        <h5>Hôtel chez Amina</h5>
        <p>Night starting at <strong>96€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        </div>
          
        </div>
    <h5 style="cursor: pointer;">Show more</h5>
      
    </div>
  <div id="accommodation-popular">
    <h3>Most popular</h3>
    <div id="popular-nav">
      
      <div >
        
        <h5>Morning Sun Hotel</h5>
        <p>Night starting at <strong>128€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        </div>
      
      <div >
        <h5>Au coeur de l'eau Bed and Breakfast</h5>
        <p>Night starting at <strong>71€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #dfdddd;" ></i>
        </div>
      <div >
        <h5>Tout bleu et Blanc Hotel</h5>
        <p>Night starting at <strong>68€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #dfdddd;" ></i>      
      </div>
          
    </div>
          
  </div>
          
</div>

I thank in advance anybody who will take the time to help me.

CodePudding user response：

you can also add this line to .accommodation-picture{ } in css to keep the border and it will fit in the div.

box-sizing: border-box;

CodePudding user response：

I deleted border from img and add padding for div.

#accommodation-content{
    display: flex;
    flex-flow: row wrap;
}

#acccommodation-city{
    flex-grow: 2;
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    padding: 16px 0px px 16px;
    margin-right: 16px;
    margin-left: 16px;
}

#accommodation-nav{
    display: flex;
    flex-flow: row wrap;
}

#accommodation-nav > div {
    padding: 3px;
    flex: 33%;
}

.accommodation-item{
    background-color: white;
    border-radius: 10px;
    box-shadow: 10px 5px 5px #E0DDDD;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: min-content;
}

.accommodation-picture{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: max-content;
    width: 100%;
}

#accommodation-popular{
    flex-grow: 1;
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    padding: 16px 0px 0px 16px;
}

#popular-nav{
    display: flex;
    flex-flow: column wrap;
}

.popular-item{
    background-color: white;
    border-radius: 10px;
    box-shadow: 10px 5px 5px #E0DDDD;
    margin-right: 10px;
    margin-bottom: 10px;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/ 
                              css?family=Raleway">
<script src="https://kit.fontawesome.com/         
                     1f544e41e8.js" crossorigin="anonymous"></script>

<div id="accommodation-content">
  <div id="acccommodation-city">
    <h3>Accommodations in Marseille</h3>
    
    <div id="accommodation-nav">
      
      <div >
        <img  
               src="https://i.stack.imgur.com/Mbjwm.jpg">
        <h5>Auberge la Cannebière</h5>
        <p>Night starting at <strong>25€</strong></p>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #0065FC;" ></i>
        <i style="color: #dfdddd;" ></i>
        </div>
     
        </div>
      
    </div>

          
</div>