rogner une image sans la redimensionner

1 août 2013 à 11:22:31

Bonjour

J'essaie de recadrer une image en html/css.

J'ai utiliser la fonction clip mais cela ne fonctionne pas.

<img style="clip:rect(0px,60px,200px,0px);overflow:hidden" src="leliendelimage"/>

L'image s'affiche mais n'est pas rognée(je précise que ne cherche pas à redimensionner l'image).

Merci d'avance pour votre aide.

-
Edité par templeton 1 août 2013 à 11:23:35

jQzz

1 août 2013 à 11:35:33

Bonjour,

regarde ce tutoriel.

Mon site web Pensez à faire une recherche avant de poster ! Je ne donne pas d'aide par message privé.

Lamecarlate

1 août 2013 à 12:35:38

jQzz > on parle là d'image dans le html, pas de background

templeton > la propriété clip ne fonctionne que sur des éléments en position: absolute, il faut que tu ajoutes cette propriété à ton image (bien sûr, pense à mettre son parent en position: relative, afin de lui donner un référent, sinon ton img va partir n'importe où).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

nightmat

1 août 2013 à 13:29:04

Sinon pour rester dans le flux, il suffit d'englober l'image dans un conteneur avec overflow: hidden;, et c'est à ce conteneur qu'on donnera les dimensions voulues.

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

templeton

6 août 2013 à 11:50:32

Bonjour

Merci pour vos conseils.Au fait j'essaie de rogner à la fois les côtés droit et gauche d'une image.

Voilà ce que j'ai essayé:

 <div width="300px" style="position:absolute;overflow:hidden">
    <img style="position:relative;margin:auto;width:600px;left:-100px;right:-100px" src="./res/images/chart1.png"/>
    </div>

L'image est rognée de 100px du côté gauche mais pas de rognage du côté droit.

Je ne sais pas comment faire pour le faire des 2 côtés.

Lamecarlate

6 août 2013 à 11:56:22

Tu n'utilises plus clip ?

-
Edité par Lamecarlate 6 août 2013 à 11:56:52

Pas d'aide concernant le code par MP, le forum est là pour ça :)

templeton

6 août 2013 à 14:20:50

avec clip j'ai essayé mais ça ne marche pas.J'avais fait

<div width="400px" style="position:absolute;overflow:hidden">
    <img style="position:relative;width:600px;clip:rect(0,-100px,0,-100px)" src="./res/images/chart1.png"/>
    </div>

mais ça ne rogne d'aucun côté de l'image.

-
Edité par templeton 6 août 2013 à 14:21:31

templeton

9 août 2013 à 12:02:44

Bonjour

Quelqu'un a t'il des idées?

J'essaie de rogner une image sur les côtés droit et gauche(à la fois) le tout sans la redimensionner.

Merci d'avance.

-
Edité par templeton 9 août 2013 à 12:05:50

Alban Cornuau

18 novembre 2016 à 15:48:49

Bonjour, et désolé pour le déterrage,

une solution simple pour rogner un image sans la redimensionner est de définir des marges négative
si je reprend le sujet.

<div style="width:400px; overflow:hidden">
  <img src="//placehold.it/600" style="width:600px; margin: 0 -100px;"/>
</div>

Ce message n'est que pour les futures internautes qui tomberai sur cette page.

Si tu ne sais pas, essaies quelque chose, si ça ne marche, demande à quelqu'un comment il ferai, puis fait le à ta manière !
If you don't know, try something, if it doesn't work, ask someone how he would do, then do it your own way !