[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

1	.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

Source: Responsive Images in display: table-cell – A PEN BY Matt Stow.
Voir également: Why do Firefox and Opera ignore max-width inside of display: table-cell?.

<p>Normal "responsive" image</p>
<img src="http://placehold.it/650x150" />

<p>Image in a display: table-cell</p>
<div class="cell"><img src="http://placehold.it/650x150" /></div>

<p>Image in a display: table-cell with width: 100%</p>
<div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

<p>Normal "responsive" image</p>

<p>Image in a display: table-cell</p>

<p>Image in a display: table-cell with width: 100%</p>

img {
  height: auto;
  max-width: 100%;
}

.cell {
  display: table-cell;
}

.cell-fluid {
  width: 100%;
}

img {

height: auto;

max-width: 100%;

}

.cell {

display: table-cell;

}

.cell-fluid {

width: 100%;

}

Articles récents

Catégories

Archives

Méta

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

display: table-cell;