26815 sujets

CSS et mise en forme, CSS3

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 Smiley smile

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)