Redimensionner et centrer une image

[Passepoil]

Bonjour,

Je suis débutant avec le xhtml et les css. J'ai commencé dernièrement à faire des .epub et les images me causent beaucoup de maux de tête.

Ce que j'ai:
- Une image et sa légende au travers un texte.

Ce que je veux:
- Image centrée
- Légende centrée et qui ne déborde pas de l'image
- L'image peut être de format paysage ou portrait
- L'image et la légende doit être pleine page (ou au maximum possible)
- L'image et légende ne déborde pas sur la page suivante
- L'image doit se redimensionner

J'ai essayé avec un bloc <div>:

Code html :

1
2
3
4
5
 
<div class="photoetlegende">
    <p class="photo"><img alt="image4.jpg" src="../Images/image4.jpg" /></p>
    <p class="legende">Description</p>
</div>

Et le css:

Code :

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
 
p.photo {
	font-family: "Georgia";
	line-height: 1.5em;
	font-size: 1.00em;
	margin-bottom: 0.00em;
	margin-top: 0.53em;
	text-indent: 0.00em;
	margin-right: 0.00em;
	margin-left: 0.00em;
	text-align: justify;
	font-weight: normal;
	font-style: normal;
	color: rgb(0,0,0);
	text-align: center;
}
 
p.legende {
	font-family: "Georgia";
	line-height: 1.00em;
	font-size: 0.65em;
	margin-bottom: 0.63em;
	margin-top: 0.00em;
	text-indent: 0.00em;
	margin-right: 0.00em;
	margin-left: 0.00em;
	text-align: center;
	font-weight: normal;
	font-style: normal;
	color: rgb(0,0,0);
	max-width: 70%;
}
div.photoetlegende { 
	display: inline-block;
	width:100% !important;
	float:middle;
	margin: 0 .5em 0 0 !important;
	line-height: 1.50em !important;
	height: 50%;
	text-align: center;
}
img {
	max-height: 75%;
	max-width: 100%;
}

L'image est centrée et se redimensionne mais la légende déborde sur la page suivante.

J'ai aussi essayé avec un <table> mais sans succès.


Merci du coup de main.

Pascal

[dev14]

Bonjour,

une page test serait la bienvenue.

essaye de trouver un site qui fait exactement ce que tu veux, tu prends firebug sur mozilla et tu te calques sur leur façon de faire.