IMAGE CENTRE

Bonjour,

Voir avant de lire !

Je cherche à centrer une image automatiquement sans utiliser de padding, avec un pourcentage ou des vmax ou autres.

Simple et efficace, il faut juste que l'image soit justifiée au centre et de bas en haut centré. Si je grossis mes imgs à 200% le tout doit être au centre même si l'image déborde.

J'ai essayé mais en 20. Je suis certains que c'est un truc tout con. Si parmi vous il y a des experts

HTML

<ul class="categorie-profiles">
                        <li class="thumbnail-profiles">
                            <a href="#">
                                <div class="thumbProfiles">
                                    <img src="../img/pic_profile_3.png">
                                </div>
                                <div class="thumbnail-info-wrapper">
                                    <span id="nameProfil">PROFIL</span>
                                    <span id="ageProfil">(AGE)</span>
                                    <span id="cityProfil">Monptellier</span>
                                </div>
                            </a>
                        </li>

...
CSS

.categorie-profiles{
    padding: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    grid-auto-rows: 55vw;
}
.thumbnail-profiles {
    background-color: #B0B0B0;
    position: relative;
    overflow: hidden;
}
.thumbProfiles {
}
.thumbProfiles img {
    max-width: 100%;
    background-color: #B0B0B0;
}

IMG

Exemple de la réalisation (image)
Modifié par enzoa (11 Oct 2019 - 20:09)

aliasdmc a écrit :
Bonjour enzoa,
Je suis pas sur d'avoir bien compris mais je tante ma chance :
https://codepen.io/Zonecss/pen/PooZYXv

Génial ! Merci beaucoup pour ton aide, le soucis est régler !