Scalabilité CSS image carte

Question

J'ai un problème qui me dérange pendant quelques jours: Comment puis-je faire pour la partie centrale de cette image de puzzle fonctionne comme un lien lorsque je redimensionne les fenêtres du navigateur (vue PC, tablette, vue mobile .. .)? J'ai besoin de lier l'image de race pour travailler en tant que lien.

<style type="text/css"> 
 
.header-images { 
 
display: table; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
} 
 

 
.img-01 { 
 
    display: table-cell; 
 
    border: none; 
 
} 
 

 
.img-02 { 
 
    display: table-cell; 
 
    border: none; 
 
} 
 

 
.img-03 { 
 
    display: table-cell; 
 
    border: none; 
 
} 
 

 
.img-04 { 
 
    display: table-cell; 
 
    border: none; 
 
} 
 

 
.header-images img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
</style>

<div class="header-images"> 
 
<div class="row"> 
 
    <div class="img-01"> 
 
    <a href="home/zuechter"><img src="http://s27.postimg.org/rloi8ejr7/01_en.png" alt=""></a> 
 
    </div> 
 
    <div class="img-02"> 
 
    <a href="/home/hundesport"><img src="http://s27.postimg.org/lm0r4qyyr/02_en.png" alt=""></a> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="img-03"> 
 
    <a href="/home/mitglied"><img src="http://s27.postimg.org/6fzarjybn/03_en.png" alt=""></a> 
 
    </div> 
 
    <div class="img-04"> 
 
    <a href="/home/jugend"><img src="http://s27.postimg.org/61xyrye83/04_en.png" alt=""></a> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

je réussi à le fixer à l'aide Matt Stow plugin. Merci Matt!