28106 sujets

CSS et mise en forme, CSS3

Hello,

J'ai un petit bug sur un site que j'utilise et j'arrive pas à trouver d'ou ça vient d'ou mon post.

Le bug en question apparaît que sur chrome et que sur version récente de chrome : sur ie, firefox, chrome ancienne version : c'est tout bon.
Le bug : voir photo, les images a gauche s'affichent seulement sur 50px de haut.

Vous pouvez voir l'affichage souhaité sur firefox ici : https://www.toutablocs.com/fr/programme-2.html

Je suis pas du tout expert en code mais jusqu’à présent le css marchait nickel et la je trouve pas de solution.

L'idée est que j'avais mis un div a gauche qui s'adapte en hauteur en fonction du texte de droite, s'il y a en a plus ou moins. Et pour que l'image remplisse toujours 100% de la hauteur j'avais mis le css ci dessous. Height 50px c'est pour que que l'image ne s'affichent pas sur une hauteur de 100% de la page puisque le conteneur es t en flex. Min-height : 100% c'est pour que l'image soit a 100% du div.

Dans chrome dernière version on dirait qu'il ne prend pas en compte le min-height=100%
Surement le code n'est pas top mais ca marchait super jusqu'a présent, sur tous les navigateurs, j'etais content de moi !!! lol

Pouvez-vous m'aider svp je ne trouve pas la solution !!

Le code css utilisé :

object-fit: cover;
height: 50px;
min-height: 100%;
width: 100%;

Merci de votre aide
Hello,

Si j'enleve le height 50px, la photo prend la hauteur de la page et pas du bloc de texte....

J'avais vu cette astuce sur un forum.

Ca marche bien d'ailleurs sur firefox, etc....

Donc je cherche toujours !!

Merci de votre aide
Modérateur
Bonjour,

Je remplacerais
object-fit: cover; height: 50px; min-height: 100%; width: 100%;

par
object-fit: cover; height: 100%; width: 100%;


Par ailleurs, tu n'échapperas tôt ou tard à un nettoyage de ton code. Ça part dans tous les sens. Par exemple, quand je vois dans "templates/it_milano/custom/css-compiled/custom_13.css" que le conteneur de tes images a le style ".proga{float:left;max-width:50%;width:50%;min-height:100%}", je me dis que ça ne peut que mal finir tôt ou tard, car sachant que le conteneur de ce conteneur a un "display:flex", c'est le rôle du flex de donner les dimensions qu'il faut au conteneur de classe ".proga".

Je n'ai pas regardé le reste. Il doit y avoir d'autres cas de ce genre.

Amicalement,