Problème sur l'affichage des img Firefox/Chrome

Sujet résolu

13 novembre 2017 à 14:12:55

Bonjour,

J'ai un problème problématique (oui oui) sur les différences d'affichages entre Chrome (et explorer) et Firefox.

Voici mon fichier test.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="test_style.css" />
        <title>test</title>
    </head>

    <body>
	       <section>
			<article>   
				<div class="centrer">
					<img src="../images/modelisations/Blender/espaceBlend.jpg"/>
				</div>
						
				<br/>
				<br/>
						
				<div class="centrer">
					<img src="../images/modelisations/Blender/espace.png" />
				</div>
						
			</article>
		</section>
				
     </body>
</html>

et le code du fichier test_style.css

.centrer
{
	display: flex;
	width: 60%;
	margin: auto;
}
body
{
	border: 3px blue outset; /*bordure*/
}
article img
{
	margin: auto;
	border: 3px red outset; /*bordure*/
}

Sur Firefox l'affichage est parfait, et la taille des image suit la taille de mon navigateur de manière responsive.

Cependant sur Chrome l'affichage est catastrophique, les images s'affichent en grandeur réel et non que faire de tenir dans le block <body> alors ne parlons même pas de suivre la taille du navigateur.

Avez vous une idée de l'origine du problème ?

Merci d'avance pour votre aide

Alexis

-
Edité par AlexisPiot 13 novembre 2017 à 14:19:54

Lamecarlate

13 novembre 2017 à 14:37:31

Bonjour,

j'aurais tendance à penser que ça se rapproche de ceci : https://blog.goetter.fr/2015/10/30/flexbox-a-casse-mes-images-responsive/ .

(et sinon, si tes images doivent forcément s'afficher en beaucoup plus petit qu'elles ne sont pour de vrai, tu gagneras à les redimensionner avant avec un logiciel de retouche)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

AlexisPiot

13 novembre 2017 à 16:02:59

Bonjour,

Merci de ton aide, sur le lien seul la méthode trois à fonctionné, je met le nouveau code pour les curieux et je le passe en résolu.

Le fichier .php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="test_style.css" />
        <title>test</title>
    </head>

	<body>
				<section>
					<article>   


						<div class="centrer">
							<img src="../images/modelisations/Blender/espaceBlend.jpg" height="400"/>
						</div>
						
						<br/>
						<br/>
						
						<div class="centrer">
							<img src="../images/modelisations/Blender/espace.png" height="400"/>
						</div>
						
					</article>
				</section>
				
    </body>
</html>

et le css

.centrer
{
	display: flex;
	width: 60%;
	margin: auto;
}
body
{
	border: 3px blue outset; /*bordure*/
}
article img
{
	margin: auto;
	overflow: auto;
	border: 3px red outset; /*bordure*/
}

Alexis