Sujet Précédent Sujet Suivant

Afficher une image adapté à la fenêtre

Fermé
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 - 1 nov. 2011 à 14:15
 marionette48 - 12 oct. 2012 à 11:36
Bonjour,

Je cherche une méthode pour afficher une image qui serait adaptée à la taille de la fenêtre du navigateur. C'est à dire que l'image serait affichée et visible en entier dans la fenêtre quelque soit la taille de l'image et de la fenêtre.

Si quelqu'un avait un bout de code en HTML, PHP ou Javascript. Je suis preneur.

Merci d'avance pour vos réponses.


A voir également:

5 réponses

Réponse 1 / 5
Zhp Messages postés 198 Date d'inscription mercredi 27 avril 2011 Statut Membre Dernière intervention 5 mars 2013 37
1 nov. 2011 à 14:22
Bonjour,

Pour ca il faut utiliser une balise image qui contient ton font et lui donner les règles css suivante : img{width:100%;height:100%}
Avec un positionnement absolue et un z-index tu peut imiter l'effet "background"
0
marionette48
12 oct. 2012 à 11:36
Bonjour je suis intéressée par cette solution, car je cherche à faire une image qui prenne la totalité de l'écran, mais je suis débutante et je ne sais pas comment donner ces règles css à une balise...merci de m'éclairer!!
0
Réponse 2 / 5
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 692
1 nov. 2011 à 14:39
En faisant cela, l'image occupe toute la largeur de l'écran et est donc étirée.
Ce n'est pas un background que je veux.
Moi ce que j'aimerai, c'est que l'image garde sa proportion et de dépasse pas les bords de l'écran que ce soit en largeur qu'en hauteur.

J'ai vu des cas similaires sur le net où l'image était réduite pour s'adapter automatiquement à la fenêtre du navigateur.
Lorsqu'on passe le curseur sur l'image, le curseur devient une loupe.
0
Réponse 3 / 5
Zhp Messages postés 198 Date d'inscription mercredi 27 avril 2011 Statut Membre Dernière intervention 5 mars 2013 37
1 nov. 2011 à 14:48
Ok c'ets juste pour visionner une image. Pardon j'avais comprit. Dans ces cas la regarde pour redimensionner une fenêtre de navigateur avec JS.

https://www.commentcamarche.net/contents/589-javascript-l-objet-window
0
Réponse 4 / 5
babane5 Messages postés 99 Date d'inscription mercredi 2 novembre 2011 Statut Membre Dernière intervention 26 juin 2012 11
2 nov. 2011 à 09:58
<div id="slideshowHolder">
<div class="slide">
<img src='images/home/image2.jpg' alt='img1' />
</div>

<div class="slide">
<img src='images/home/image3.jpg' alt='img2' />
</div>

<div class="slide">
<img src='images/home/image1.jpg' alt='img3' />
</div>

</div>
<script type="text/javascript">

var adaptImage = function(){
var image = $('.slide img');
// Initialisation taille du WINDOW
var screenW = $('body').width();
var screenH = $('body').height();
// Initialisation taille de l'image
var imageW = 2560;
var imageH = 1600;
// Modifier la largeur de l'image
var currentW = screenW;
var currentH = imageH / imageW * screenW;
// Modifier la hauteur de l'image
if(currentH < screenH){
currentH = screenH;
currentW = imageW / imageH * screenH;
}
image.attr('width', currentW);
image.attr('height', currentH);
$('#slideshowHolder').jqFancyTransitions({ width: screenW, height: screenH });

}

$(document).ready(function(){

adaptImage();

$(window).resize(function() {
adaptImage();

});

});
</script>

/*CSS*/

body{background-color: #000; margin: 0 auto; overflow-y: hidden;}




Normalement sa le fait !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 692
2 nov. 2011 à 13:45
Je vous met le code de ma page, sachant qu'il y a déjà un script javascript qui affiche aléatoirement une image d'un dossier. 


$hote_bd="localhost"; //nom de l'hôte de la base de données
$login_bd="root";     //nom d'utilisateur de la base de données
$password_bd="";      //mot de passe de la base de données
$nom_bd="Image";     //nom de la base de données 


mysql_connect($hote_bd,$login_bd,$password_bd); //Connexion à mysql
mysql_select_db($nom_bd); //Sélection de la base de données

	$categorie = $_POST['cate'];
	
	$reqconf="select Valeur_Conf from Configuration where Option_Conf = 'Tempsdefil'";
$resconf=mysql_query($reqconf) or die(mysql_error());
$don = mysql_fetch_array($resconf);
$temps = $don['Valeur_Conf']; //Récupère dans la base de donnée l'intervalle de passage d'une image à l'autre.

	$liste_repertoire_total = array();
	$liste_image_total = array();
	$rep_racine = './';
	$cle_rep_racine = opendir($rep_racine);
	
	while($fichier = readdir($cle_rep_racine))
	{
		if(is_dir($fichier) && $fichier!='.' && $fichier!='..' && substr($fichier,0,3)==$categorie)
		{
			$liste_repertoire_total[]=$rep_racine.$fichier;
			$cle_rep = opendir($rep_racine.$fichier);
			
			while($fichier_rep = readdir($cle_rep))
			{
				if(!is_dir($fichier_rep) && $fichier_rep!='.' && $fichier_rep!='..' && $fichier_rep!='thumb.db')
					$liste_image_total[]=$rep_racine.$fichier."/".$fichier_rep;
			}
		}
	} //Récupère la liste des images du répertoire

	function php2js( $php_array, $js_array_name ) {
	// contrôle des parametres d'entrée
	if( !is_array( $php_array ) ) {
		trigger_error( "php2js() => 'array' attendu en parametre 1, '".gettype($array)."' fourni !?!");
		return false;
	}
	if( !is_string( $js_array_name ) ) {
		trigger_error( "php2js() => 'string' attendu en parametre 2, '".gettype($array)."' fourni !?!");
		return false;
	}

	// Création du tableau en JS
	$script_js = "var $js_array_name = new Array();\n";
	
	// on rempli le tableau JS à partir des valeurs de son homologue PHP
	foreach( $php_array as $key => $value ) {
	
		// pouf, on tombe sur une dimension supplementaire
		if( is_array($value) ) {
			// On va demander la création d'un tableau JS temporaire
			$temp = uniqid('temp_'); // on lui choisi un nom bien barbare
			$t = php2js( $value, $temp ); // et on creer le script JS
			// En cas d'erreur, remonter l'info aux récursions supérieures
			if( $t===false ) return false;

			// Ajout du script de création du tableau JS temporaire
			$script_js.= $t;
			// puis on applique ce tableau temporaire à celui en cours de construction
			$script_js.= "{$js_array_name}['{$key}'] = {$temp};\n";
		}
		
		// Si la clef est un entier, pas de guillemets
		elseif( is_int($key) )  $script_js.= "{$js_array_name}[{$key}] = '{$value}';\n";
		
		// sinon avec les guillemets
		else $script_js.= "{$js_array_name}['{$key}'] = '{$value}';\n";
	}

	// Et retourn le script JS
	return $script_js;
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> BlackHole - Image Aléatoire </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" src="./1jquery-1.4.2.js" ></script>

<script language="JavaScript">
<?php echo php2js($liste_image_total, 'tabImg'); ?>

<?php echo 'var temps='.$temps;?>

function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;
$('img').fadeOut('normal',function(){
document.getElementById("img").src=tabImg[num];
$('img').fadeIn('normal',function(){
setTimeout("changeImage()",temps);
});
});
}

/*

function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;

document.getElementById("img").src=tabImg[num];
setTimeout("changeImage()",temps);
}


*/



</script>

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="a.css" />

</head>

<body onload="changeImage();">


	<p>
		<center>
			<img src="images/imagesParDefaut.png" id="img">
                </center>

        </p>
</body>

</html>


J'ai essayé d'appliquer ton code à mon cas mais je bute sur certaines choses.
Par exemple, tu as mis 3 balises image dans ton code.
Est-ce essentielle ou un simple exemple

En appliquant ton code dans mon cas, je me suis retrouvé avec des images agrandis et déformés qui occupent toutes la fenêtre du navigateur en hauteur et largeur.
Moi ce que je recherche c'est dans le cas ou l'image est trop grande pour l'afficher entièrement dans la fenêtre, que ce soit en largeur ou/et hauteur, diminué sa taille sans touché au rapport largeur/hauteur pour que l'image apparaisse en entier.

Bon après, j'ai peut-être mal adapté ton code.

Désolé, je suis pas très à l'aise avec le javascript. ^^
0
babane5
2 nov. 2011 à 14:03
PS: C'est du jQuery, donc il faut aussi mettre la bibliothèque (et avant ton code js)=>

<script type="text/javascript" src="./1jquery-1.4.2.js" ></script>

Et le seul problème dans mon code, c'est qu'il faut mettre manuellement les largeurs des images !
0

Discussions similaires

Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses
problème de pixel
bernie33260 -
contrariness -

14 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses