[Résolu] En CSS, mettre à l'échelle et découper une image

Question

Pages :

jytest

11 Jun 2013 à 14:59

Bonjour,

Je souhaiterai intégrer une image jpeg (de 200x200px).

Dans une <img>,j'aurais souhaité :
- une réduction de taille (120x120px)
- une découpe de 10px sur tous les pourtours.

J'ai pensé à "clip"...
Mais je n'y arrive pas!
Pouvez-vous m'aider ?
D'avance merci !
Modifié par jytest (14 Jun 2013 - 08:27)

Hermann

12 Jun 2013 à 21:08

Bonjour,
clip ne s'applique (vérifier si c'est encore le cas) qu'aux éléments positionnés en absolu.
Il faut ajouter un conteneur à l'image (un span typiquement) que tu dois transformer en boîte de bloc via un display:block/inline-block, qu'il faut dimensionner (taille de l'image -20px donc) puis ajouter un overflow:hidden et enfin décaler l'image de 10px vers le haut et la gauche.
Modifié par Hermann (13 Jun 2013 - 16:18)

jytest

12 Jun 2013 à 23:29

Merci pour ta réponse !
Puis-je me permettre d'être encore plus explicite par un petit exemple, stp.
Par avance, je t'en remercie grandement !

Hermann

13 Jun 2013 à 14:16

jytest a écrit :
Merci pour ta réponse !
Puis-je me permettre d'être encore plus explicite par un petit exemple, stp.
Par avance, je t'en remercie grandement !

Je vais un peu vite, c'est sûr. Qu'est-ce que tu ne comprends pas?

Zelalsan

13 Jun 2013 à 14:30

salut,
avec "clip" ça devrait le faire facilement

img {position:absolute;clip:rect(10px,190px,190px,10px);}

6l20

13 Jun 2013 à 14:53

Hello,

Ce ne sont pourtant pas les ressources qui manquent :
Sur codrops
Chez impressivewebs avec animation au survol.
Ou encore chez css-tricks...

*Correction de lien
Modifié par 6l20 (13 Jun 2013 - 15:26)

jytest

13 Jun 2013 à 15:15

Merci à tous pour vos interventions !
Mon problème est double :
Réduire l'image à l'échelle + tronquer l'image.

Voilà ce qui me manque :

a écrit :

Dans une <img>
(initialement 200x200px), j'aurais souhaité :
- une réduction de taille (120x120px)
- une découpe de 10px sur tous les pourtours.

Modifié par jytest (14 Jun 2013 - 08:31)

Hermann

13 Jun 2013 à 16:17

jytest a écrit :
Merci à tous pour vos interventions !
Mon problème est double :
Réduire l'image à l'échelle + tronquer l'image.

Voilà ce qui me manque :

Dans une <img>
(initialement 400x400px), j'aurais souhaité :
- une réduction de taille (120x120px)
- une découpe de 10px sur tous les pourtours.

Si le positionnement absolue ne pose pas problème, le mieux évidemment est de passer par CLIP mais dans le cas contraire, tu peux commencer par appliquer ce que je t'ai mis dans mon premier message. Je vois pas ce que tu entends par découpe de 10px.

jytest

14 Jun 2013 à 08:20

Pour les expluications de "clip", c'est OK.
Pour la mise en oeuvre, là c'est une autre histoire !

Car, je voudrais d'abord redimensionner (par css, et non par photoshop)
mes images, initialement de taille 200x200px en une taille de 120x120px...
un peu comme ceci :


<img src="truc.jpg" width='120' height='120' />

Et ensuite par "clip", je cacherai 10px en haut, à droite, en bas et à gauche...
pour finalement avoir une image à l'écran de 100x100px...


<img src="truc.jpg" width='100' height='100' style='position:absolute; clip:rect(10px 110px 110px 10px);'/>

Mais ceci ne fonctionne pas, chez moi !
Pourquoi ?
Modifié par jytest (14 Jun 2013 - 08:43)

jytest

14 Jun 2013 à 08:41

Je viens de tomber sur
cet article...

Yordi

Modérateur

14 Jun 2013 à 11:12

Salut,

Voici ma solution :
un overflow hidden sur le div conteneur + position relative pour center le contenu

Le code :


<div class="cropImg">
	<img src="200x200.png" alt="" width="120" />
</div>


.cropImg{
	width: 100px;
	height: 100px;
	overflow: hidden; 
}
.cropImg img{
	position: relative;
	top: -20px;
	left: -20px;
	margin: 10px;
}

J'espère que ça pourra t'aider...

Aussi, quand tu dis un crop de 10px, tu veux dire que ton image doit avoir un format fini de 110px ou 100px (donc 10px de crop sur tout le tour) ?

6l20

14 Jun 2013 à 11:59

C'est pourquoi est-ce donc faire ? Smiley smile

Zelalsan

14 Jun 2013 à 14:37

a écrit :
Et ensuite par "clip", je cacherai 10px en haut, à droite, en bas et à gauche...
pour finalement avoir une image à l'écran de 100x100px...
<img src="truc.jpg" width='100' height='100' style='position:absolute; clip:rect(10px 110px 110px 10px);'/>
Mais ceci ne fonctionne pas, chez moi !
Pourquoi ?

Parce qu'il faut garder la taille initiale.

<img src="truc.jpg" width=120 height=120>

PS: ce n'est jamais bon de charger une image pour lui donner des dimensions inférieures

jytest

14 Jun 2013 à 15:00

Je n'en sors vraiment pas avec ce problème...
Puis-je vous mettre toute ma page,
afin de tenter de m'aider !!!

Je vous avoue que cela me prend le chou !!!

L'image à retravailler est "image_2".
Donc cette image de base fait précisément 400x400px...
Je souhaiterais qu'elle soit mise à l'échelle 90x90px...
Que 10px soient ensuite oubliés sur tout le tour de l'image, pour qu'elle devienne 70x70px...
Et qu'enfin, elle soit entouré d'un cadre de 1px !!!

A l'aide, svp !


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
<!--
.case {
	width: 235px;
	height: 300px;
	border: 1px;
	border-color: #CBCACA;
	border-style: solid;
	padding: 0px 5px 0px 5px;
	margin: 0px 20px 10px 0px;
	cursor: pointer;
	position: relative;
}
.case img.image_0,
.case img.image_1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 211px;
	height: 211px;
	z-index: 10;
	padding-left: 16px;
}
.hidden {
	display: none;
}
.case img.image_2 {
	position: relative;
	top: 155px;
	left: 160px;
	width: 70px;
	height: 70px;
	z-index: 100;
	border: 1px solid #CBCACA;
}
.case:hover img.image_2 {
	display: block;
}
.case img.image_2:hover ~ .image_0 {
	display: none;
}
.case img.image_2:hover ~ .image_1 {
	display: block;
}
.details {
	position: absolute;
	top: 215px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	width: 235px;
}
-->
</style>
</head>

<body>
<table>
	<tr>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' />
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' />
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' />
        </div>
        </td>
    </tr>
	<tr>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' />
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' />
        </div>
        </td>
        <td>
        <div class='case'>
            <img class='image_2 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_1 hidden' src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' alt='bague' />
            <img class='image_0'        src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' alt='bague' />
        </div>
        </td>
    </tr>
</table>


</body>
</html>

Modifié par jytest (14 Jun 2013 - 15:05)

Zelalsan

14 Jun 2013 à 16:56

<img src="image_2" alt="" width=90 height=90>

.image_2 {position:absolute; clip:rect(10px,80px,80px,10px);}

???
Par contre tu dois repositionner les éléments qui suivent tes img vu qu'elles sont en position:absolute.

jytest

14 Jun 2013 à 17:01

Afin d'être sûr d'avoir bien compris,
puis-je te demander d'adapter mon code,
par rapport à ta proposition ?

Zelalsan

14 Jun 2013 à 17:05

bin c'est déjà adapté, ce sont les dimensions que tu veux avec le rognage souhaité. Tu as essayé ?
Modifié par Zelalsan (15 Jun 2013 - 03:23)

jytest

14 Jun 2013 à 17:16

Cela ne fonctionne pas.
(la première bague en haut à gauche)
De plus, je pers le cadre autour de l'image !
Modifié par jytest (15 Jun 2013 - 01:24)

Zelalsan

14 Jun 2013 à 19:17

C'est vraiment un faux problème ce truc, je ne comprends toujours pas cette démarche mais il te reste la solution d'englober ton image dans un conteneur. Un exemple.

jytest

15 Jun 2013 à 01:23

Merci à toi, Zelalsan !
Ta solution est nickel !
Merci !
Modifié par jytest (15 Jun 2013 - 01:24)

Pages :

Sujet clos

CSS et mise en forme, CSS3

[Résolu] En CSS, mettre à l'échelle et découper une image