Élément d'image central en parental div
Comment puis-je installer le centre de l'élément d'image au sein du parent? div? Je voudrais le faire pour que le milieu de l'image soit toujours au centre de son parent. De plus, je veux que l'image ait toujours une hauteur 100% /Remarque: je ne veux pas étirer la largeur de l'image/.
Voir ici un exemple:
http://jsfiddle.net/Ex5ax/5/
/
CSS:
Voir ici un exemple:
http://jsfiddle.net/Ex5ax/5/
/
<div class="box">
<img src="featured.jpg"/>
</div>
CSS:
.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
.box img { height: 100%; width: auto; text-align: center; }
Aucun résultat connexe trouvé
Invité:
Pour répondre aux questions, connectez-vous ou registre
4 réponses
Alice
Confirmation de:
CSS Aux parents
Au lieu de filiale
.
.box {height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align: center; /* align center all inline elements */
}
Ici
http://jsfiddle.net/qolami/Ex5ax/10/
.
Mettre à jour
Il semble que, sous l'image, il y a aussi un espace
, Il fait référence aux symboles de hauteur de chaîne réservés. Pour l'enlever des éléments intégrés, tels que
, vous pouvez utiliser
:
.box img {height: 100%;
width: auto;
vertical-align: bottom; /* <-- fix the vertical gap */
}
http://jsfiddle.net/qolami/Ex5ax/25/
Constantine
Confirmation de:
de CSS Pour l'image B. CSS Pour son parent div, Donc le vôtre CSS comme suit:
.box {
height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align:center
}
.box img {
height: 100%;
width: auto;
}
Et tout est!
Babette
Confirmation de:
, Si votre parent div a une largeur, de sorte que l'image sera centrée conformément au parent
Felix
Confirmation de:
.box img { margin-left: -25%; margin-top: -25%; }Vous aurez probablement besoin de les configurer à chaque image et peut-être pas à cause des tailles.