I need to "build" an image that is composed of different pieces. Here a schema:
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