vendredi 23 mars 2018

grid image responsive and without padding

I need to "build" an image that is composed of different pieces. Here a schema:

https://imgur.com/a/ZfbUy

There is no space or padding between each piece of the image, and it would be nice if the entire image was responsive...any idea? I tried this, but the image loses responsivity:

     echo '<div id="top_testa" style="overflow: hidden; ">
     <div class="image-div" style="float:right;margin-left:0px;max-width: 
    20%;max-height: 20%;" >

          </div>
      <div class="image-div" style="float:right;margin-right:8.5%;max-width: 
   20%;max-height: 20%;" >
   <img 
 src="TestaLuc.png" id="top_head" name="top_head">
  </div>

  <div class="image-div" style="float:left;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style="clear:right;"></div>
</div>';
echo '<div id="base_testa" style="overflow: hidden; ">
  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class="image-div" style="float:right;margin-right:8.5%;max-width: 20%;max-height: 20%;" >
   <img src="BaseTestaMim.png" id="bottom_head" name="bottom_head">
  </div>

  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style="clear:right;"></div>
</div>';
echo '<div id="asta" style="overflow: hidden; ">
  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class="image-div" style="float:right;margin-right:8.6%;max-width: 20%;max-height: 20%;" >
   <img src="AstSupNull.png" id="top_asta" name="top_asta">
  </div>

  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;">

  </div>


  <div style="clear:right;"></div>
</div>';

echo '<div id="middle" style="overflow: hidden; ">
  <div class="image-div" style="float:right;margin-left:0px;max-width: 20%;max-height: 20%;" >

  </div>
  <div class="image-div" style="float:right;margin-right:13.3%;max-width: 20%;max-height: 20%;" >
   <img src="AstInfLuc.png" id="bottom_left_asta" name="bottom_left_asta" align="right">
  </div>

Thanks




Aucun commentaire:

Enregistrer un commentaire