27800 sujets

CSS et mise en forme, CSS3

Bonjour
J'ai réussi (avec une extension) a avoir des images qui soient responsives.
Néanmoins, il y a un cas que je n'arrive pas à résoudre.
Sur une page blog, il est important (ergonomiquement parlant?!) que la hauteur d'une image soit limitées pour éviter des décalages ... tout en ne déformant pas l'image

Voir l'article avec image sur la page https://joom41test.88h.ovh/
En essayant:
height: 300px!important;

Cela déforme l'image

j'ai essayé aussi
object-fit: cover;

mais pas sûr d'avoir bien compris ce que cela fait
connecté
Modérateur
Salut,

HDcms a écrit :
J'ai réussi (avec une extension) a avoir des images qui soient responsives.

Une extension uniquement pour faire des images responsive ou ca fait autre chose ?

HDcms a écrit :
que la hauteur d'une image soit limitées pour éviter des décalages ... tout en ne déformant pas l'image

Comme avec max-height ?

HDcms a écrit :
Voir l'article avec image sur la page https://joom41test.88h.ovh/
En essayant:
height: 300px!important;

Cela déforme l'image

n'oublie pas de mettre une width: auto;
Bonjour
Merci pour ces suggestions.
L'extension ne s'occuper à priori que de celà.
J'arrive à pointer sur l'image de l'article https://joom41test.88h.ovh/index.php/article-avec-image
mais ce n'est pas ce que je veux
Je souhaite pouvoir "standardiser" les tailles sur la page blog.
j'essaie pour cela de trouver un class spécifique au dessus de l'image mais cela ne fonctionne pas
.div.com-content-category-blog__items img {
  max-height: 30px!important;
  width: auto;
  object-fit: cover;
}
connecté
Modérateur
Qu'est-ce que tu veux dire par "standardiser" ?
J'ai du mal a cerner ce que tu veux faire. Pour moi il y a deux possibilités :

- soit tu donne une max-width et max-height a tes images et elle prendron la place qui leur faut en gardant leur proportions
- soit tu défini une taille d'image précise genre 200px par 300px et là :
-- soit ton image est déformée normal
-- soit ton image est rognée. et la :
--- soit tu la passe en background-image
--- soit tu joue avec object-fit: cover;

j'ai l'impression que c'est sur la dernière que tu veux aller (le "hauteur d'une image soit limitées" m'a embrouillé au début).

Mets une height sur le <p> juste au dessus de l'image et sur l'image :
height: 100%;
width: 100%;
object-fit: cover;

Modifié par _laurent (21 Feb 2022 - 14:39)
Ce que j'appelle "standardiser" c'est le fait d'avoir à peu près la même hauteur dans la page blog des différentes vignettes. Les vidéos sont "standardisés" pas besoin d'y retoucher, le problème est avec l'image où je dois avoir une image ayant une hauteur proche de celle d'une vidéo ou fichier pdf, tout en ne la déformant pas (à cause de la largeur).
Je ne peux pas intervenir sur le "p" au-dessus de l'image, mais sur une class qui est généré uniquement sur la page blog https://joom41test.88h.ovh/ , mais pas la page article https://joom41test.88h.ovh/index.php/article-avec-image
Après je me demande à quoi sert "object-fit: cover;" et si cela sert vraiment dans mon cas ?
vraiment pas sûr !
connecté
Modérateur
HDcms a écrit :
Je ne peux pas intervenir sur le "p" au-dessus de l'image, mais sur une class qui est généré uniquement sur la page blog https://joom41test.88h.ovh/ , mais pas la page article https://joom41test.88h.ovh/index.php/article-avec-image

Pourquoi tu ne peux pas intervenir sur le p ?
.com-content-category-blog__item blog-item p {
   hieght: 200px;
}


HDcms a écrit :
Après je me demande à quoi sert "object-fit: cover;" et si cela sert vraiment dans mon cas ? vraiment pas sûr !

Bah suffit de lire la doc et de regarder l'exemple.
mozilla a écrit :
La propriété CSS object-fit définit la façon dont le contenu d'un élément remplacé (<img> ou <video> par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
Donc en gros faire rentrer une image dans un un conteneur sans la déformer (mais en la rognant pour le "cover").

Après si je suis encore a coté de la plaque je veux bien une maquette de ce que tu aimerai comme résultat ca me guidera...
Ah ok pour le p, je croyais qu'il fallait mettre un class dedans.
merci pour l'info sur l'object-fit, cela fonctionne donc sur le container parent ? c'est ce que je ne compenais pas !
Voici ce que j'ai mis. Cela ne fonctionne pas mais en vidant le cache
.com-content-category-blog__item blog-item p {
max-height: 30px!important;
width: auto;
object-fit: cover;
}

L'image ci-dessous de la page blog. L'idée est d'avoir une image (la fille) qui soit toujours responsive selon les écrans, tout en éliminant le blanc sous la vidéo de gauche.
Modifié par HDcms (21 Feb 2022 - 16:12)
connecté
Modérateur
HDcms a écrit :
Ah ok pour le p, je croyais qu'il fallait mettre un class dedans.

Bah pas plus que quand tu tapais sur l'image avec ton sélecteur
.div.com-content-category-blog__items img 
C'est le même principe



HDcms a écrit :
merci pour l'info sur l'object-fit, cela fonctionne donc sur le container parent ? c'est ce que je ne compenais pas !

Non ca fonctionne sur l'image.
_laurent a écrit :
Mets une height sur le <p> juste au dessus de l'image et sur l'image :
height: 100%;
width: 100%;
object-fit: cover;

si le parent n'a pas de hauteur ca ne vas pas t'arranger ! Il faut donner au p une hauteur et dire à l'image "maintenant tu prend toute la place dispo".


HDcms a écrit :
L'image ci-dessous de la page blog. L'idée est d'avoir une image (la fille) qui soit toujours responsive selon les écrans, tout en éliminant le blanc sous la vidéo de gauche.

T'as tu louper le dernier bouton "insérer l'image" apres l'avoir uploadé Smiley lol
Je pense que je vois ce que tu veux dire mais ta phrase "L'idée est d'avoir une image (la fille) qui soit toujours responsive selon les écrans" veut pas dire grand chose haha Smiley ravi
Effectivement, je n'ai pas fais gaffe au message "La taille du fichier excède le maximum autorisé" et pourtant je réduis à 55 ko !!

J'ai fais plein d'essai sans arriver à modifier l'affichage de l'image sur la page blog alors que j'arrive à le faire sur la page article mentionnée

Je prends la ba ba avec
 p {
border:10px dotted black!important;
/* height: 30px!important;*/
}

Aucun effet alors que je vois la modif sur la page article.
Je suis perdu !

upload/1645457742-58614-pb-css.jpg
Modifié par HDcms (21 Feb 2022 - 16:35)
connecté
Modérateur
HDcms a écrit :

 p {
border:10px dotted black!important;
/* height: 30px!important;*/
}

Aucun effet alors que je vois la modif sur la page article.

bah ca marche bien chez moi. Ou est-ce que tu le rajoutes ce code ? Tu l'as mis en ligne ?
connecté
Modérateur
Alors je ne sais pas comment tu dev ça, mais ton CSS n'est chargé que sur la page de détail. Il faut mettre ton CSS soit dans une partie globale à tout ton site, soit dans le css lié à ta page d'accueil (et non à ta page de détail)
J'étais entrain de réfléchir à ça et effectivement j'avai fais une erreur bête d'affectation du css.
Ouf j'ai peu reprendre mes essais en pointant bien sur le bon élément de l'image uniquement sur la page blog. Un peu galéré, un peu compris. J'ai mis:
.blog-item p{
max-height: 200px!important;
}

.blog-item img {
border:10px dotted black!important;
width: 100%;
}


Questions subsidiaires
1/ serait-il possible d'avoir (sans déformation bien sûr) une plus grande partie du corps de cette femme dans le container avec la limite max de la hauteur?
2/ effet de bord, je touche aussi le pdf avec le "p". Bon pas très grave, je peux vivre avec car pas facile de toucher l'image sans toucher la vignette du pdf ?
connecté
Modérateur
Salut !

Alors avant tout, si ta prod est a jour là :
- tu as mis un max-height et non un height sur le <p>
- il n'y a pas de object-fit sur l'image
- il n'y a pas de height: 100% sur l'image
- tu peux virer les !important ils ne servent a rien

Ensuite

1/ si tu lis la doc (je te jure que tu devrais tester y'a beaucoup de réponse ! Smiley lol ) il y a marqué encadré en bleu :
mozilla a écrit :
Note : Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété object-position.

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
et t'as juste a cliquer sur le lien pour arriver à https://developer.mozilla.org/fr/docs/Web/CSS/object-position
MAIS par défaut il est au centre. Si la tu ne vois que la tete c'est que le object-fit n'est pas actif. Si tu reprends point par point ma liste au dessus ca devrait le centrer naturellement sans toucher à la position.

2/ effectivement, comme il est aussi dans un <p>. Dans un soucis d'uniformisation tu ne veux pas que le PDF ait la même taille que les images et les vidéos ? Sinon il faut que tu trouves le moyen de différencier tes posts en indiquant si c'est un post image, un post video ou un post pdf dans une classe par exemple.
Bonjour
Ok super. C'est vrai que c'est bien clair sur un élément sur le site mozilla que j'ai déjà pris comme référence. Après je n'avais pas perçu qu'il fallait 2 éléments. Je n'ai pas mis d'object-position car cal me semble correcte pour la majorité des cas puisqu'il n'y a pas de déformation Smiley smile
Voilà ce que j'ai mis:
.blog-item p{
height: 280px;
}
.blog-item img {
/*border:10px dotted black!important;*/
height: 100%;
width: 100%;
object-fit: cover;
}


Reste le point avec les autres types d'élément !
Je ne suis pas trop l'actu CSS, mais je me demande s'il n'y aurait pas la possibilité maintenant ? de mettre des règles ? faire des test ?
Est-ce qu'il serait possible (sans trop complexifier) de mettre un height sur la balise "p" uniquement si "img" est en dessous ?
.blog-item p [Si ... ]{

Sinon je cherche bien sûr à générer une class sur l'image (mais pas si simple non plus dans un cms!)

Merci en tout les cas pour ce soutien éclairé qui m'a permis de résoudre ce problème principal qui me gênait depuis longtemps.
Meilleure solution
connecté
Modérateur
HDcms a écrit :
Je ne suis pas trop l'actu CSS, mais je me demande s'il n'y aurait pas la possibilité maintenant ? de mettre des règles ? faire des test ?
Est-ce qu'il serait possible (sans trop complexifier) de mettre un height sur la balise "p" uniquement si "img" est en dessous ?
.blog-item p [Si ... ]{

Si, c'est le selecteur :has, enfin c'est ce qui s'en rapproche le plus. tout le monde attend un truc comme ça mais pour le moment il n'est pas prêt (le support est quasi nul donc il va falloir patienter encore un peu)
https://developer.mozilla.org/fr/docs/Web/CSS/:has

En CSS pas possible encore mais en Js ca peut se bricoler. Mais a mon avis ca resterait plus simple de le gérer par le CMS... à voir donc..

HDcms a écrit :
Merci en tout les cas pour ce soutien éclairé qui m'a permis de résoudre ce problème principal qui me gênait depuis longtemps.

Avec plaisir Smiley smile
Modifié par _laurent (22 Feb 2022 - 12:02)
Ok dommage que l'on ne puisse pas modifier l'élément parent. J'ai vu que cela fait longtemps que cette proposition existe et répond à un besoin (cf résultats moteur de recherche)
connecté
Modérateur
Après c'est un "faux" problème car normalement, en pleine maitrise du code, il suffit de différencier les parents avec une classe au moment de la construction du DOM (comme on disait plus haut) et ne pas gérer ça uniquement en CSS. C'est une impasse pour ceux qui ne maitrise que le CSS et ne touche pas au reste code.

Bonne journée