how can i make my pictures in my mosaic to be 100% of the respective divs?

Question

I'm am trying to make a mosaique for a website. I would like the pictures to fit nicely their respective divs. I have tries many configurations but the pictures always seem to be overlapping and/or don't fit 100% of their respective divs. It seems that the pictures do'nt follow the pencentages I indicated.

body{
 width:100%;
 height: 100%;
}



#firstRow {
 margin:4px;

 display:flex;
 height:40%;
 width: 100%;
 
}




#secondRow {
 margin:4px;

 display:flex;
 height:10%;
 width: 100%;
 
}

#thirdRow {
 margin:4px;

 display:flex;
 height:50%;
 width: 100%;
 
}

.bigImageMosaique {
 margin:4px;
 position: relative;
 
 width: 50%;
}




.mediumImageMosaique {
 margin:4px;
 position: relative;

 width: 60%;
}



.smallImageMosaique {
 margin:4px;
 position: relative;
 
 width: 40%;
}


img{
 display:block;
width : 100%;
height: 100%;

}

h2{
 position: absolute;
 bottom:5%;
 left:0;
 width: 100%;
}

h2 span {
 color: white;
 font: bold 24px/45px;
 letter-spacing: -1px;
 background: rgb(0, 0, 0);
 background: rgba(0, 0, 0 ,0.7);
 padding: 10px;

}

<!DOCTYPE html>

<html>


<style>
 <?php include ("CSSMosaiqueSeule.css"); ?>
</style>

<body>

<div id="firstRow">

 <div class="bigImageMosaique">
  <img src="images\mosaiqueImage\bolt.jpg" alt=""/>
  <h2><span> Je suis une légende vivante </span></h2>
 </div>

 <div class="bigImageMosaique">
  <img src="images\mosaiqueImage\bolt.jpg" alt=""/>
  <h2><span> Je suis une légende vivante </span></h2>
 </div>
</div>


<div id="secondRow">

 <div class="mediumImageMosaique">
  <img src="images\mosaiqueImage\bolt.jpg" alt=""/>
  <h2><span> Je suis une légende vivante </span></h2>
 </div>

 <div class="smallImageMosaique">
  <img src="images\mosaiqueImage\bolt.jpg" alt=""/>
  <h2><span> Je suis une légende vivante </span></h2>
 </div>
</div>

<div id="thirdRow">
 <div class="smallImageMosaique">
  <img src="images\mosaiqueImage\bolt.jpg" alt=""/>
  <h2><span> Je suis une légende vivante </span></h2>
 </div>

 <div class="mediumImageMosaique">
  <img src="images\mosaiqueImage\bolt.jpg" alt=""/>
  <h2><span> Je suis une légende vivante </span></h2>
 </div>
</div>


</body>




</html>

I would do this using css. Apply it as background image and add:background-size:cover; this will ajust everything without much coding — Jonas Wilms, Aug 06 '16 at 14:54

score 1 · Accepted Answer · edited May 23 '17 at 12:22

There are some good answers here as well but Jonas' comment is a way of doing it that works well in older browsers. It's just annoying if you have several images to add as you start adding extra classes to hold the different background images and goes against DRY. Here's what the code would look like:

In your HTML mark-up:

<div class="your-class-name"></div>

In your CSS:

.your-class-name {
background: url(http://ThePathToYourImageHere...) no-repeat center center;
background-size: cover;}

how can i make my pictures in my mosaic to be 100% of the respective divs?

1 Answers1