En CSS, découper et réduire une image

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 !

Bonjour,

avez-vous pensé à placer l'image en background?

[edit]
ou alors:
Code:

1 2 3 4 5 img { border:10px solid salmon; box-sizing:border-box; }
Code:

<img src="http://lorempixel.com/200/200/food" width="120" height="120"/>

:arrow: codepen

oui, bien sûr !
Mais, problème, j'ai un :hover sur cette image !
Et là, cela ne fonctionne plus !

Bonjour,

Citation:

Envoyé par jytest

J'ai pensé à "clip"...
Mais je n'y arrive pas! Pouvez-vous m'aider ?

On attend de voir TON code...

1/ SOLUTION avec IMAGE :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div.img120 { 
	position:relative; 
	width:120px;
	height:120px;
	padding:0; 
	display:inline-block; 
	margin:10px;  /* TEST */
	background:yellow;  /* TEST */
	border:1px solid red; /* TEST */
}
div.img120 img { 
	position:absolute;
	width:140px; left:-10px;
	height:140px; top:-10px;
	clip:rect(10px,130px,130px,10px);
	opacity:0.5; /* TEST */
}
div.img120:hover img { 
	opacity:1.0; /* TEST */
}

Code:

1
2
<div class="img120"><img src="images/pomme.jpg" alt="" /></div>
<div class="img120"><img src="images/banane.png" alt="" /></div>

2/ SOLUTION avec BACKGROUND :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.bkg120 { 
	position:relative; 
	width:120px;
	height:120px;
	display:inline-block; 
	background:center center no-repeat; 
	background-size:140px 140px; 
	background-color:yellow; /* TEST */
	margin:10px; /* TEST */
	border:1px solid red; /* TEST */
	opacity:0.5; /* TEST */
}
div.bkg120:hover { 
	opacity:1.0; /* TEST */
}

Code:

1
2
<div class="bkg120" style="background-image:url(images/pomme.jpg);" alt="" /></div>
<div class="bkg120" style="background-image:url(images/banane.png);" alt="" /></div>