Accoler deux images

**lenoil** · 23/01/2015, 11h11

Bonjour,

je souhaite mettre deux images l'une à coté de l'autre sachant que ces deux images ont une rotation de 90° mais je n'y arrive pas ...

Comment faire j'ai essayé dans un tableau dans un div

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
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css">
      .imgTest{
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
      }
    </style>
</head>
<body>
<table border="1">
<tr>
<td><img src="toto.png" class="imgTest"></td>
<td><img src="tata.png" class="imgTest"></td>
</tr>
</table>
</body></html>

merci pour votre aide

**NoSmoking** · 24/01/2015, 11h30

Bonjour,
pour que tes images soient accolées il faut en fait que leurs référents soient accolés à cause de la rotation justement qui par défaut auront la taille avant rotation. Il sera donc nécessaire de les dimensionner fonction des images.

sur base de

Code html :

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

1
2
<div><img src="http://club.developpez.com/webdesign/Developpez.com/Logos/logo-dvp-v08.png" class="imgTest"></div>
<div><img src="http://club.developpez.com/webdesign/Developpez.com/Logos/logo-dvp-v08.png" class="imgTest"></div>

on aura le CSS correspondant suivant

Code css :

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

1
2
3
4
5
6
div{
  float:left;
  background:#cde;
  max-width: 92px;    /* hauteur de l'image (avec bordure éventuelle) */
  height:219px;       /* largeur de l'image (avec bordure éventuelle) */
}

Concernant la rotation il te faut définir le point de rotation afin de pouvoir appliquer une translation replaçant tes images au bon endroit.

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
.imgTest{
  border:1px solid #ABC;/**/
  /* point de rotation défini en haut à gauche */
  -webkit-transform-origin: left top 0;
     -moz-transform-origin: left top 0;
      -ms-transform-origin: left top 0;
          transform-origin: left top 0;
  /* on tourne et on décale sur le bord gauche */
  -webkit-transform: rotate(90deg) translate(0, -100%);
     -moz-transform: rotate(90deg) translate(0, -100%);
      -ms-transform: rotate(90deg) translate(0, -100%);
       -o-transform: rotate(90deg) translate(0, -100%);
          transform: rotate(90deg) translate(0, -100%);
}

Au final cela donne

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
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS3 rotation translation</title>
<style>
div{
  float:left;
  background:#cde;
  max-width: 92px;    /* hauteur de l'image (avec bordure éventuelle) */
  height:219px;       /* largeur de l'image (avec bordure éventuelle) */
}
.imgTest{
  border:1px solid #ABC;/**/
  /* point de rotation défini en haut à gauche */
  -webkit-transform-origin: left top 0;
     -moz-transform-origin: left top 0;
      -ms-transform-origin: left top 0;
          transform-origin: left top 0;
  /* on tourne et on décale sur le bord gauche */
  -webkit-transform: rotate(90deg) translate(0, -100%);
     -moz-transform: rotate(90deg) translate(0, -100%);
      -ms-transform: rotate(90deg) translate(0, -100%);
       -o-transform: rotate(90deg) translate(0, -100%);
          transform: rotate(90deg) translate(0, -100%);
}
</style>
</head>
<body>
  <div><img src="http://club.developpez.com/webdesign/Developpez.com/Logos/logo-dvp-v08.png" class="imgTest"></div>
  <div><img src="http://club.developpez.com/webdesign/Developpez.com/Logos/logo-dvp-v08.png" class="imgTest"></div>
</body>
</html>

A voir : Les transformations en CSS3

**lenoil** · 27/01/2015, 09h17

merci pour ta réponse que je vais étudier

Je m'en suis sorti en mettant des position:absolute avec des top et left

**NoSmoking** · 27/01/2015, 22h04

Je m'en suis sorti en mettant des position:absolute avec des top et left

perso je pense que quand c'est inutile, ou qu'il y a moyen de faire sans, autant s'en passer !

**Bovino** · 28/01/2015, 08h05

Personnellement, ce que je ne comprends pas trop, c'est si tu veux afficher tes images en mode portrait, pourquoi sont-elles stockées en mode paysage ?

**lenoil** · 28/01/2015, 11h00

en fait je récupère des images d'un canvas et je veux les retourner.
Et donc finalement et pour être plus simple je les retourne non pas en css mais une page aspx se charge de les retourner
c'est plus simple pour le multi navigateurs

Merci pour votre aide en tout cas

Accoler deux images [CSS 3]

CSS

Discussions similaires

Partager

Partager