Réduire une image sans la déformer

**momjunior** · 31/07/2015, 17h55

Bonjour

J'aimerai savoir comment réduire une image à l'affichage sur ma page html, sans que celle-ci ne soit déformée. Voici mon code:

Code :

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

<img class="imageflottanteProfil" alt="non disponible" src="<c:url value="/images/${ sessionScope.candidats.photo }"/>"   />

Et dans le fichier css:

Code :

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

1
2
3
4
5
6
7
.imageflottanteProfil
{
float: left;
margin-right: 20px;
width: 200px;
height: 220px;
}

Merci

**NoSmoking** · 31/07/2015, 18h23

Bonjour,

fixe simplement la largeur et la hauteur s'ajustera
fixe simplement la hauteur et la largeur s'ajustera

**momjunior** · 01/08/2015, 01h04

Ok je vois. En fait lorsque je fixe la largeur,pour une image dont la hauteur vaut le double la largeur, la hauteur dépasse mon div. Donc il me faudrait rogner l'image je crois comme ce que font les utilisateurs de facebook lors de l'ajout d'une image de profil.

Je vais donc chercher comment insérer l'outil de rognage lors de l'ajout d'une image.

C'est ça hein?

**NoSmoking** · 01/08/2015, 09h58

Tu pourrais regarder du coté de la propriété clip mais compte tenu des contrainte de positionnement, position:absolute exigée il faut un conteneur positionné et, de plus, comme l'image est en absolute elle n'influe pas sur les dimensions du conteneur qu'il faut donc également dimensionner oups!

Dans ce cas passe directement par un conteneur dimensionné que tu souhaite et ayant un overflow:hidden.

exemple :

Code html :

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
21
22
23
24
25
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>overflow:hidden</title>
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
.vignette {
  width:108px;
  height:45px;
  overflow:hidden;
}
</style>
</head>
<body>
<div class="vignette">
  <img src ="http://www.developpez.net/template/images/logo.png">
</div>
</body>
</html>

équivalent de

Code :

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

1
2
3
img {
  clip:rect(0,108px,45px,0);
}

Si tu veux un "rognage" ~~haut et gauche alors retour au [COLOR="#0000FF"]clip[/COLOR~~] ou à une image en background mais boff !

[EDIT] Correctif:
pour le rognage à gauche ou en haut tu peux jouer avec le margin de l'IMG.

Invité · 02/08/2015, 09h23

Bonjour,
j'aurais pris l'autre solution de NoSmoking :

Code html :

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

1
2
3
<figure class="imageflottanteProfil">
   <img alt="non disponible" src="<c:url value="/images/${ sessionScope.candidats.photo }"/>"   />
</figure>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.imageflottanteProfil
{
  position:relative;
  float: left;
  margin-right: 20px;
  width: 200px;
  height: 220px;
  overflow:hidden;
}
.imageflottanteProfil img
{
  position:absolute;
  width:100%;
  top:0; left:0;
}

On ne touche pas à l'image originale.

**momjunior** · 05/08/2015, 16h00

Ok merci ça marche

**adiGuba** · 05/08/2015, 17h46

Salut,

J'arrive après la bataille... mais j'ai juste une remarque quand à la solution proposé : elle ne fonctionne correctement qu'avec les images au format "paysage".
Les images au format "portrait" seront rogné sur le bas...

Je pense qu'il serait plus adapté d'utiliser max-width/max-height sur l'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
.imageflottanteProfil
{
  float: left;
  margin-right: 20px;
  width: 200px;
  height: 220px;
  background: red;
  line-height: 220px;
  text-align: center;
}
.imageflottanteProfil img
{
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}

Exemple : http://jsfiddle.net/610xcjo4/

a++

**momjunior** · 05/08/2015, 18h44

tu as raison adiGuba, c'est beaucoup mieux

Réduire une image sans la déformer

CSS

Discussions similaires

Partager

Partager