28172 sujets

CSS et mise en forme, CSS3

Img et ratio

Bonjour,

Je voudrais croper une image et la rendre responsive, mais je ne sais pas comment y parvenir.
Admettons que j'ai une image rectangulaire, je souhaite qu'elle ait un ratio carré et que le reste de l'image qui dépasse disparaisse, tout en restant responsive.

En gros j'aimerais pouvoir faire width :100% / height :auto mais en ayant changé le ratio de l'image.
Je ne comprends pas pourquoi ça marche sur une image sans taille défini (alors qu'elle en a une au final) et pas sur une image dont la taille est défini par le css.



J'ai déjà essayé de la mettre dans une div et d'appliquer une taille sur la div + overflow: hidden pour couper l'image mais je perd le coté responsive a cause de la taille.
Modérateur
Salut,

Tu peux utiliser soit background-size: cover; si ton image est en background soit object-fit: cover; pour la balise img : https://jsfiddle.net/undless/tbnsvh02/

Petite parenthèse, ton objectif est flou. Tu veux donner un ratio carré a une image en laissant un height:auto; ? C'est incompatible si tu laisse "auto". Il faut que tu force une hauteur et une largeur similaire si tu veux une image carré. Par exemple :
height: 80vw;
width: 80vw;

(80vw pour 80% viewport width)
ou juste 
height: 100px;
width: 100px;

mais la c'est pas fluide.
Si tu choisi un width100%; ca sera quasi impossible en CSS d'avoir une hauteur correspondante car si tu mets height:100%; le 100% se réfèrera à la hauteur du conteneur et non a la largeur. BREF y'a un truc a creuser sur ce que tu demande ici, si on peut t'aider...

Bonne journée
upload/1603910538-78421-alsa.jpg Oui j'ai déjà jouer avec object-fit mais je ne parviens pas a ce que je souhaite, pareil pour background.

Est ce que tu pourrais m'éclairer sur un point ? Mon image a une taille qui lui est propre et lorsque j'applique width: 100% height: auto elle devient responsive.
Pourquoi je ne peux pas lui imposer une taille différente et lui appliquer le même procédé. La première fois la taille est pas défini mais ca veut pas dire qu'elle n'en possède pas une pour autant.

J'ai trouvé un genre de bricolage en faisant la technique du padding trick, ça ressemble a ce que je veux.


Dans le cas que tu me propose moi je ne veux pas de hauteur fixe parce que je souhaite que le contenu se rapetisse en réduisant la largeur. Et je veux que la partie dans le cadre elle soit fixe et responsive (je sais que les deux ne vont pas ensemble mais mon image devrait mieux illustrer ce que je souhaite).

Dans mon exemple , je croppe en 1er puis ensuite elle se réduit en fonction de la largeur du navigateur.
Modifié par ripeace_ (28 Oct 2020 - 19:42)
Modérateur
ripeace_ a écrit :
Est ce que tu pourrais m'éclairer sur un point ? Mon image a une taille qui lui est propre et lorsque j'applique width: 100% height: auto elle devient responsive.

Jusque là ok. Le 100% lui donne la largeur de la page (ou de son conteneur) et le height:auto lui permet de s'agrandir en gardant son ratio original.

ripeace_ a écrit :
Pourquoi je ne peux pas lui imposer une taille différente et lui appliquer le même procédé.

Là j'ai du mal a comprendre ce que tu dis mais je crois que j'ai capté. C'est le ratio original que tu veux bouger. Faire comme si c'était une image carré de base. Et bien le soucis c'est que tu peux pas définir deux fois sa taille... :
width:200px;
height: 200px;
width:100%;
height:auto;

Les paramètres s'écrasent l'un l'autre...

ripeace_ a écrit :
La première fois la taille est pas défini mais ca veut pas dire qu'elle n'en possède pas une pour autant.

Oui mais c'est sa taille de base, pas une taille forcée en CSS. Découpe ton image en carré avant de l'importer Smiley lol

Le "padding trick" c'est celui là avec l'image en background : https://jsfiddle.net/undless/tbnsvh02/10/ ? Dans ce cas oui gg wp

Sinon comme je te l'avais marqué il y a la solution de passer par les vw mais c'est un peu casse gueule..
Au final j'espérais que l'on puisse modifier la taille de base via css, et ensuite lui appliquer de la responsivité. Visiblement ça n'est pas possible.

Merci d'avoir pris le temps de me répondre !
Modifié par ripeace_ (29 Oct 2020 - 13:39)
Bonsoir,

Sympa, je ne connaissais pas la propriété. Malheureusement ça ne supprime pas la partie non visible.
Modérateur
Bonjour,
Mathieuu a écrit :
Idée en ayant vu un autre post, il y a peut être moyen de faire quelque chose en essayant de bidouiller un truc autour du clip-path ?
https://jsfiddle.net/o2kwzdp6/

Bien vu, Mathieuu. Cela aurait d'ailleurs été cocasse que la même astuce réponde à 2 questions complètement différentes le même jour de surcroit.

ripeace_ a écrit :
Malheureusement ça ne supprime pas la partie non visible.

Là, je ne vois pas de quelle partie non visible il s'agit ? Pourrais-tu préciser ta pensée ?

Accessoirement, comme pour "l'autre sujet" https://forum.alsacreations.com/topic-4-87694-1.html, on peut coupler clip-path et shape-outside. Voir https://jsfiddle.net/parsimonhi/c4d2z395/ ou https://jsfiddle.net/parsimonhi/4hw69er1/

Voir aussi https://jsfiddle.net/parsimonhi/oz1bs7pk/

Amicalement,
Modifié par parsimonhi (29 Oct 2020 - 20:55)
Décidément je manque de clarté, c'est terrible.
Et bien j'ai deux images l'une sous l'autre, lorsque je rogne une des deux avec clip path, je me retrouve avec du vide entre les deux images, le vide étant le reste de l'image qui as été rogné.

Je me fais comprendre ?

upload/1604002021-78421-exe.jpg
Modérateur
Bonjour

Variante où l'image est directement dans le html et non en background. L'image d'origine est plus large que haute, l'image recoupée apparait dans son conteneur plus haute que large. Le conteneur en lui-même n'a rien de spécial si ce n'est d'être complètement visible en largeur.

https://jsfiddle.net/parsimonhi/L1c0u4pn/

Après, on peut tout imaginer !

Amicalement,
Modifié par parsimonhi (29 Oct 2020 - 21:21)
Modérateur
Bonjour,
ripeace_ a écrit :
Décidément je manque de clarté, c'est terrible.
Et bien j'ai deux images l'une sous l'autre, lorsque je rogne une des deux avec clip path, je me retrouve avec du vide entre les deux images, le vide étant le reste de l'image qui as été rogné.

Je me fais comprendre ?


Oui, oui ! Smiley biggrin

Mais on va bien trouver quelque chose (sauf que ce ne sera pas ce soir).

Amicalement,
Bonsoir parsimonhi,

Désolé j'ai oublié de te saluer.
Je m'était trompé dans mon code, finalement ça répond bien comme dans ton exemple.
Je vais tenter de bien comprendre la solution proposé et voir si elle me convient dans ce que je veux faire.
Merci a vous deux.
Modérateur
Bonjour,

Au cas où, une autre solution dérivée du padding-top trick, mais où l'image reste dans le html (au lieu d'être en background). Du coup, on a un html normal. Par contre le css est un peu plus lourd.

https://jsfiddle.net/parsimonhi/4tgf2m7r/

EDIT: et une variante qui s'adapte à n'importe quel ratio moyennant la modification d'uniquement la valeur de padding-top. Selon moi, c'est cette variante qu'il te faut !

https://jsfiddle.net/parsimonhi/0fh2cqd7/

Amicalement,
Modifié par parsimonhi (30 Oct 2020 - 09:38)
Sujet clos
Aller à