Agrandir une image et la centrer

**apdf1** · 16/09/2019, 09h31

Bonjour

J'ai un code pour agrandir les images qui fonctionne, mais j'aimerai lui apporter une modification c'est à dire:
lorsque l'image sa grandir je voudrais que les images se positionne au milieu de l'écran.
Mon code:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
 
<style>
body {
        font-family: Arial, Helvetica, sans-serif;
        background: #000;
}
img {
        transition: transform 0.25s ease;
}
img:hover {
        -webkit-transform: scale(2.0);
        transform: scale(2.0);
}
table {
        border: thin dotted #575b60;
        border-collapse: collapse;
        width: 60%;
        margin-left: 250px;
        margin-top: 150px;
}
td {
        border: thin dotted #575b60;
        height: 30px;
        text-align: center;
        background-color: #000;
}
    </style>
    </head>
 
    <body>
 
 
<table>
	<tr>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
	</tr>
	<tr>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
	</tr>
	<tr>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
		<td>
			<a href="">
				<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" height="150" width="300" />
			</a>
		</td>
	</tr>
</table> 
 
    </body>
</html>

Je vous remercie
Max

Invité · 16/09/2019, 09h47

Bonjour,

Utilise un plugin de popup/modal.

**apdf1** · 16/09/2019, 10h51

Bonjour

Je te remercie mais je me suis redu ici https://jquerymodal.com/

j'ai récupéré ceci mais sa ne correspond pas à ce que je cherche

Code HTML :

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

1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

Tu vas me dire ............

Max

Invité · 16/09/2019, 11h01

**apdf1** · 16/09/2019, 17h27

Re bonjour

Je te remercie pour les liens mais je penser qu’on pouvez le faire directement en CSS sans passer par les plugins.

Mais bon!

Merci

**NoSmoking** · 17/09/2019, 17h05

Bonjour,

je penser qu’on pouvez le faire directement en CSS

c'est effectivement faisable sous certaines conditions, notamment que la structure ne change pas et ça c'est un gros MOINS.

Avec la présentation du code que tu as donné tu pourrais obtenir un effet intéressant.

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
21
22
23
24
25
26
27
tr:nth-child(1) td:nth-child(1) a:focus img {
  transform: translate(100%,100%) scale(2);
}
tr:nth-child(1) td:nth-child(2) a:focus img {
  transform: translate(0%,100%) scale(2);
}
tr:nth-child(1) td:nth-child(3) a:focus img {
  transform: translate(-100%,100%) scale(2);
}
tr:nth-child(2) td:nth-child(1) a:focus img {
  transform: translate(100%,0%) scale(2);
}
tr:nth-child(2) td:nth-child(2) a:focus img {
  transform: translate(0%,0%) scale(2);
}
tr:nth-child(2) td:nth-child(3) a:focus img {
  transform: translate(-100%,0%) scale(2);
}
tr:nth-child(3) td:nth-child(1) a:focus img {
  transform: translate(100%,-100%) scale(2);
}
tr:nth-child(3) td:nth-child(2) a:focus img {
  transform: translate(0%,-100%) scale(2);
}
tr:nth-child(3) td:nth-child(3) a:focus img {
  transform: translate(-100%,-100%) scale(2);
}

ceci étant à supprimer

Code :

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

1
2
3
img:hover {
  transform: scale(2.0);
}

Donc c'est faisable mais cela peut devenir vite imbuvable.

Le mieux restant l'utilisation d'un code tout fait il en existe de vraiment simple à mettre en oeuvre, de plus ils s’adapteront plus facilement à tes structures pas toujours très limpides.

Nota : pourquoi des balises <a> dans ton code, dans le cas présent cela arrange ?

Agrandir une image et la centrer

Centrer un élément en CSS

Discussions similaires

Partager

Partager