Centre dynamique hauteur/largeur Image à hauteur/largeur fixe div

J'ai un problème avec le centrage de l'image dynamique sur la div. Ainsi, l'idée principale est que l'image sait se mettre à l'échelle, qu'il s'agisse d'une image panoramique ou d'une image portrait. Le div, j'aligne, est proche de 16: 9 (300x170). Des idées?Centre dynamique hauteur/largeur Image à hauteur/largeur fixe div

Source

2012-09-06 Mihkel Viilveer

Pouvez-vous fournir un code et ce que vous avez essayé jusqu'à présent? – Chase

J'ai essayé d'afficher l'élément externe comme table et l'élément interne comme cellule de tableau, puis de l'aligner avec la table css, mais sans chance. Je pense que cela ne fonctionnerait pas aussi, si je veux la façon dont je l'ai décrit dans le PO. Peut-être un petit bloqueur est que l'image est un côté de CSS3 flip div. –

try this - DEMO

div { 
    height: 170px; 
    width: 300px; 
    border: solid; 
    line-height: 170px; 
    text-align: center; 
} 

div img { 
    display: inline-block; 
    max-width: 300px; 
    max-height: 170px; 
    vertical-align: middle; 
}

Source

2012-09-06 20:50:32

Cela a fait l'affaire. La clé était dans la propriété max-width, max-height. Merci :) –

vous êtes les bienvenus :) –

Centre dynamique hauteur/largeur Image à hauteur/largeur fixe div

Répondre

Questions connexes