1485 sujets

Web Mobile et responsive web design

Image qui s'adapte a la taille du navigateur

Bonjour,

Je suis actuellement en train de travailler sur un template responsive, le but n'est pas de l'adapter pour les mobiles mais pour la majorité des écrans de pc.

Ma question concerne le recadrage de photos dans le navigateur.

Je m'explique :
Je dois afficher de grandes images en format portait et paysage (une seule par page) qui doit prendre la taille maximum dans le navigateur.
sur ce site : http://www.chanel.com/fr_FR/
il y a un exemple de ce que je veut faire.

L'image s'adapte soit en largeur soit en hauteur à la taille du navigateur.

Mon code serait : 
<html>
    <body>
        <div style="position:absolute" >
            <p>some text</p>
        <div>
        <div style="position:static height:100% width:100%" >
            <img src="my-image.jpeg" alt="my image">
        </div>
    </body>
</html>


L'image doit s'adapter à la taille du navigateur sans faire apparaitre de scrollbars.
J'ai essayé pas mal css mais je galère et je pense pas que ce soit possible.
Je pense plutôt à un code jquery mais mes connaissances dans ce domaine sont trop pauvres pour ça.

Je me tourne donc vers vous, si quelqu’un à déjà résolu ou tenté de résoudre cette problématique, je suis preneur.

Cordialement,
chadocat
tu devrais plutôt t'orienter vers l'utilisation d'un plugin javascript comme vegas..

Vegas plugin

il prévoit en plus l'incrustation d'un overlay pour palier à la dégradation de qualité de l'image lorsque celle ci est sur-échantillonnée..
Le problème c'est que l'image est amenée par une extension (j'utilise joomla) et elle est amenée avec la balise img dans le code html.

De plus, je souhaiterais pour des raisons semantiques la laisser avec cette balise pour avoir un texte alternatif et et un titre d'image...

les 2 solutions que vous proposez induisent un rognage de l'image que je souhaiterais éviter.

Je suis en train de bosser sur un script jquery (malgrés mes faibles connaissance sur le sujet)
je le posterais si j'arrive à un résultat correct.
Modifié par chadocat (08 Apr 2013 - 14:36)
bon, je commence à trouver une solution mais il y a quelques problèmes :

html
<html>
    <body>
        <div class="text" >
            <p>some text</p>
        <div>
        <div class="image" >
            <img class="adapt" src="my-image.jpeg" alt="my image">
        </div>
    </body>
</html>

 <script type="text/javascript" language="javascript">
		$(document).ready(function() {			
			function imageResize() { 
			var wrapH = $('div.image').height();
			var imgH = $('img.adapt').height();
			var wrapW = $('div.image').width();
			var imgW = $('img.adapt').width();
				$("img.adapt").css("height", (wrapH < imgH) ? wrapH : "auto");
				$("img.adapt").css("width", (wrapW < imgW) ? wrapW : "auto");
			}
			imageResize();
			$(window).bind("resize", function(){
				imageResize();  
			});  
		}); 

  </script>


css


div.text {
position : absolute;
width : 40%
left : 0;
top : 0;
}

div.image{
	position: absolute;
	top : 0;
	right : 0;
	left : 40%;
	width : 60%;
	bottom : 150px;
}




ça semble fonctionner lorsque je réduit la fenêtre mais lorsque je l'agrandi, l'image tremble et clignote...
Si un pro du jquery passe dans le coin un petit coup de main serais très apprécié...
Modifié par chadocat (08 Apr 2013 - 17:30)
Nouvelle solution sauf que celle-ci ne permet pas de redimensionner l'image si l'utilisateur modifie la taille de son navigateur une fois la page chargée... au secours!


html :
<html>
    <body>
        <div class="text" >
            <p>some text</p>
        <div>
        <div class="image" >
            <img class="adapt" src="my-image.jpeg" alt="my image">
        </div>
    </body>
</html>

<script type="text/javascript" language="javascript">
		$(document).ready(function() {
				var wrapH =$('div.image').height();
				var imgH = $('img.adapt').height();
				$("img.adapt").css("height", (wrapH < imgH) ? wrapH : "auto");
				var wrapW = $('div.image').width();
				var imgW = $('img.adapt').width();

				if (wrapW < imgW){
					$("img.adapt").css("width", wrapW).css("height","auto");
				}
		}); 

  </script>


le css reste le meme : 


div.text {
position : absolute;
width : 40%
left : 0;
top : 0;
}

div.image{
	position: absolute;
	top : 0;
	right : 0;
	left : 40%;
	width : 60%;
	bottom : 150px;
}
Tu veux que ton image se redimensionne seul en fonction de la taille de l'écran?

Tu n'as pas besoin d'utiliser Jquery pour cela, une dose de css suffit amplement.

max-width: 100%
height: auto

a appliquer sur ta balise image et là ton image fera la taille de l'écran et sera automatiquement redimensionnée dès que la taille de celui-ci diminuera Smiley cligne
Le problème avec cette technique c'est que l'image se redimensionne uniquement en largeur...
ex : une image plus haute que le navigateur dépassera en bas et il y aura l'apparition de la barre de défilement.
Chadocat, tu ne peux pas avoir une image qui fait 100% de l'écran aussi bien en hauteur qu'en largeur tout en étant homothétique Smiley confus
La solution d'Alex me parait la seule plausible et facile à mettre en place.
Au pire tu peux mettre un overflow:hidden sur le body ça évitera les barres de scroll mais une partie de l'image sera peut-être masquée.
Sujet clos
Aller à