Centrer une image avec ease-out au sein d'une div

Bonjour à tous,

Je travaille sur ce site: soulmateshop.net

Le client souhaiterait que les images des produits soient centrées verticalement au mileu (plutôt que top actuellement).

J'ai passé des heures à essayer de trouver la solution, notamment avec vertical-align : middle, sans succès.

Quelqu'un aurait-il une idée ?

Merci!
Steve

Bonjour et bienvenue

Tu trouveras diverses méthodes dans ce tutoriel, devenu un grand classique ici : http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html

Bonne chance et bonne journée

Bonjour,

Le problème semble venir des proportions des images, les images carrées (500x500) s'ajustent parfaitement, et apparaissent "centrées" verticalement alors qu'elles ne le sont pas du tout), les autres non.
Changer l'alignement vertical de l'image ne modifiera rien, car son conteneur est exactement de la hauteur de l'image, mais c'est l'overflow de .grve-product-media qui masque le bas du conteneur dans le cas d'images rectangulaires trop hautes, quand le conteneur a une hauteur supérieure à 203px.

Il faudrait, pour que les images non carrées apparaissent centrées verticalement, ajouter une marge négative égale à la moitié du dépassement,
j'ai testé pour la montre 2, c'est sympa,

.grve-product-media a{
	margin-top:-30px;
}

mais comme les proportions sont variables, il faut réécrire le code PHP qui génère cette page, et pour chaque image calculer au moyen de quelques lignes de code la marge négative à appliquer et l'ajouter à la balise ".grve-product-media a" de chaque image ... Réalisable mais compétences en PHP requises

Autre solution : mettre les images en background et jouer sur background-position et background-size,

mais là aussi il faut modifier le code de woo-commerce pour cette page.

Le plus simple est quand même de n'utiliser que des images carrées.

Bonjour Steve9212,

voici une autre solution éprouvée, dont le .css s'élabore en 2 temps. Par exemple :

1. créer un conteneur id=conteneur (ici aux dimensions bien définies)

#conteneur{display:inline-block;position:relative;width:500px;height:500px}

2. y affecter toute image contenue

#conteneur img{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0}

Ainsi n'importe quelle img, et quelles que soient ses dimensions elle sera toujours posée depuis son centre au centre du conteneur. Je viens de mettre en ligne un exemple explicite : http://sentrais.eu/test-position-img/diaporama.htm

Cependant, et comme envisagé dans un post précédent, il faut veiller à disposer d'un conteneur suffisamment grand ... A défaut, un correctif d'ajustement automatique d'img "trop grandes" doit être mené et ajouté au .css de toute img du conteneur :

max-width: 500px;max-height:500px

Et cela fonctionne alors parfaitement (! notamment pour IE v.8 et +++). J'ai mené également ce correctif dans mon exemple en ligne où l'img 9 surdimensionnée est ré-ajustée automatiquement aux dimensions du conteneur, tout en y demeurant centrée, et sans être distordue.

Et avec un effet d'opacité changeante et alternée sur 2 img : http://sentrais.eu/test-position-img/diaporama-2.htm
Modifié par pictural (18 Oct 2016 - 17:38)

steve9212 a écrit :
(...) J'aimerais pouvoir y arriver juste en modifiant le CSS.

Ben ! ma proposition (actuelle) n'est que pur .css, en 2 lignes !

Dans mes 2 exemples chaque img du conteneur est ensuite affectée à un changement de class par .js pour une réponse facile à ta question. Mais les attributs principaux et génériques qui t'intéressent demeurent non changeants, hormis le z-index:1 !important et z-index:2 !important afin de libérer l'img du z-index:1 du conteneur lorsque l'img est alternée...
Modifié par pictural (18 Oct 2016 - 18:34)

Merci Pictural,

J'ai essayé d'appliquer ta solution en utilisant le code CSS suivant, sans modifier le php:

#grve-product-media{display:inline-block;position:relative;width:500px;height:500px}
#grve-product-media img{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0}

Je ne vois pas de modification d'aspect. Je ne suis pas sûr qu'un conteneur soit disponible dans le code actuel..

steve9212 a écrit :
(...) Je ne vois pas de modification d'aspect.

As-tu bien intégré les attributs d'img de ton conteneur max-width et max-height ? Tel que:

#grve-product-media img
{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;max-width:500px;max-height:500px}

de façon telle qu'en écriture de la page ton "conteneur" <div id="grve-product-media"> ... </div> contienne bien tes img ...
Modifié par pictural (18 Oct 2016 - 18:56)

Super merci Pictural !

J'ai bien avancé en intégrant le code suivant :

.grve-product-media{
    display:inline-block;
    position:relative;
    width:100%;
    height:100%;
}

.grve-product-media img{
    position:absolute;
    margin:auto;top:0;bottom:0;left:0;right:0;
    max-width:auto;
    max-height:100%;
}

Tu peux voir le résultat : soulmateshop.net

Il me reste juste un dernier problème de proportions à résoudre : les images sont déformées car le ratio de proportion n'est pas conservé. J'ai essayé de résoudre ce problème avec le max-width:auto; mais cela ne fonctionne pas apparemment...

Tu aurais une idée pour les proportions ?

Merci beaucoup
Steve

Il suffirait d'avoir des images carrées, et on pourrait se passer de la solution très élégante de Pictural, la déformation qu'on voit maintenant concerne les images non carrées, tu ne peux vraiment pas retailler les images rectangulaires ?

@farang,
merci pour le compliment !

@steve,
essaie donc ceci qui respecte, me semble-t-il, les proportions d'img :

#grve-product-media
{display:inline-block;
position:relative;
width:500px;
height:500px}

#grve-product-media img
{position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
max-width:500px;
max-height:500px}

car pourquoi abandonner subitement ce qui est précieux et déterminant pour le respect des proportions ?
Modifié par pictural (18 Oct 2016 - 22:35)

Merci beaucoup @farang et @pictural pour votre aide précieuse.

Je suis arrivé à une solution satisfaisante avec le code suivant :

.grve-product-media{
    display:inline-block;
    position:relative;
    width:100%;
    height:100%;
}

.grve-product-media img{
    position:absolute;
    margin:auto;top:0;bottom:0;left:0;right:0;
    width:auto;
    max-height:100%;
}

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    width: auto;
    margin:auto;
}

.woocommerce .related ul li.product img, .woocommerce .related ul.products li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce-page .related ul li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce-page .upsells.products ul li.product img, .woocommerce-page .upsells.products ul.products li.product img {
    width: auto;
}

.grve-product-options{
    display:none;
}

.onsale {
    z-index: 1;
}