Discussion :

[jytest]

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 !

[rodolphebrd]

Bonjour,

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

[edit]
ou alors:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

codepen

[jytest]

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

[Invité]

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>