Comment créer une image centrée et liquide avec une superposition de légendes?

Question

J'essaie avec CSS d'afficher une image centrée avec une superposition de légende, et une capacité de liquide lorsque la fenêtre du navigateur est trop petite (réduire pour s'adapter).

Ma meilleure tentative actuelle ressemble le code HTML suivant (en utilisant le logo de Google comme exemple d'image)

<div align="center"> 
    <div class="container"> 
     <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" /> 
     <h3 class="caption">Image Caption</h3> 
    </div> 
</div> 

avec le CSS

.container { 
    position : relative; 
    max-width : 364px; 
} 
.picture { 
    border-radius:0.5em; 
    box-shadow: 0px 0px 0.5em #000000; 
    max-width:364px; 
} 
.caption { 
    position:absolute; 
    padding:0.25em; 
    top:1em; left:0; right:0; 
    color:black; 
    background-color:rgba(0,0,0,0.2); 
    text-align:center; 
} 

suivante Cependant, si elle se comporte centré comme je veux qu'il soit pour les grandes fenêtres de navigation, il ne rétrécit pas pour les petites fenêtres de navigateur ... Aussi, je n'ai pas besoin de support IE, un WebKit spécifique (iPhone/Android) suffirait, et je voudrais éviter JavaScript si possible .

jsFiddle prêt à jouer avec la version http://jsfiddle.net/kWH3C/1/

Answer 1

Il suffit de régler le maximum de largeur au conteneur au lieu de l'image et de dire l'image à width:100%

http://jsfiddle.net/Madmartigan/kWH3C/5/

<div class="container"> 
    <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" /> 
    <h3 class="caption">Image Caption</h3> 
</div> 

.container { 
    position : relative; 
    max-width : 364px; 
    margin:0 auto; 
} 
.picture { 
    border-radius:0.5em; 
    box-shadow: 0px 0px 0.5em #000000; 
    width:100%; 
} 
.caption { 
    position:absolute; 
    padding:0.25em; 
    top:1em; left:0; right:0; 
    color:black; 
    background-color:rgba(0,0,0,0.2); 
    text-align:center; 
} 

Vous n'avez pas besoin de la div externe, et align="center" est obsolète en HTML5, utilisez CSS pour l'alignement et le positionnement.