Bordure d'image sans changement de taille

by ydelmas

HTML

<div class="grid_3"> 
  <div class="figure">
      <img src="http://lorempixel.com/g/231/150/abstract/" />
  </div>
  <h3>Nouvel Album</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Voir plus</a>
  </p>
</div>
<div class="grid_3 avecBordure">
  <div class="figure">
      <img src="http://lorempixel.com/g/231/150/cats/" />
  </div>
  <h3>Nouvel Album</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Voir plus</a>
  </p>
</div>

CSS

/* ajout pour la bordure */
.avecBordure .figure { border: 2px solid #FF00FF; }
.figure img { max-width: 100%; vertical-align: middle; }

/* CSS issu de la grille */
.grid_3 { width: 231px; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display:inline; float:left; position:relative;
    margin-left: 6px; margin-right: 6px;
}