[Résolu] Largeur div en responsive sous Safari

Bonjour,

Un ami photographe m'a demandé de lui développer un mini site pour présenter son travail.
Son souhait principal est que le site (et donc la taille de ces photos) soit proportionnel à la taille de l'écran. Comme sur cette page http://www.thomaswhiteside.com/celebrity-1
Les photos prennent toujours environ 80% de la hauteur disponible.

Sur ce site, ils semblent utiliser une usine à gaz.
N'étant pas gazier dans l’âme, je cherche une solution plus simple à mettre en oeuvre.
Je pensais l'avoir trouvé mais cela ne fonctionne pas sous Safari et donc pas sous iPad.
Voici le résultat: http://www.ericraffis.com/v2//fr/expos
Normalement ca fonctionne correctement sous FF, Chrome et IE.

Est ce que vous auriez une idée du problème.
En gros, j'utilise une table (je sais c'est pas bien, c'est vieux jeu, mais bordel c'est pratique)
en CSS je fais des width-max:100%; height:auto;

J'ai essayé de définir la largeur dynamiqueement en JS, mais ca marche pas.

Si quelqu'un avait une piste de recherche...voir carrément un slider responsive qui accepte les slides de différentes largeurs !!

Merci pour votre aide et bon week end

Marco

pifoux a écrit :

En gros, j'utilise une table (je sais c'est pas bien, c'est vieux jeu, mais bordel c'est pratique)
en CSS je fais des width-max:100%; height:auto;

Si vous souhaitez que ce soit la hauteur qui prime, alors il faut indiquer un pourcentage sur la hauteur, et c'est le width qui devra être en auto. Ce qui évitera de déformer les images, comme sur votre exemple actuel.

Pour la table, je ne vois pas l'intérêt, mais bon... passons.

Bonjour Olivier

Désolé pour le retard.

Pour la déformation, le problème ne se pose que sous Safari et c'est la mon problème.
En fait Safari essaye de caser toutes les images dans la largeur de l'écran, alors que les autres navigateurs calcul la largeur des images suivant leur hauteur sans se préoccuper de la largeur de l'écran.
J'ai encore refais des essais, mais je n'y arrive pas...je refais des essais ce matin

Merci

Marco

Bonjour,

J'espèrais trouver une solution "CSS only", mais impossible.
Donc, voici ma solution en Jquery.

Rappel des faits: Je voulais faire un bandeau d'images horizontal, donc avec un scroll horizontal.
Il fallait également que ces images se redimensionnent automatiquement suivant la taille de la fenêtre du navigateur.

En CSS, j'ai ca:

.image {
	float:left;
	position:relative;
	max-width:100%;
	height:auto;
	width:auto;
        float:left;
}

Pour le HTML:

<div id="content">
<div id="bandeau">
<img id="img_1" data-rapport='0.54521' class='image' src='image1.jpg' />
<img id="img_2" data-rapport='1.1489' class='image' src='image2.jpg' />
</div>
</div>

et le JS

<script type="text/javascript">
$( window ).resize(function() {
	arrangement();
});

$(document).ready( function () { 
	arrangement();
});

$(window).load(function(){
	arrangement();
});


function arrangement() {
	var H=$("#content").height()
	$(".image").height(H)
}
</script>

Ce code permet de redimensionner les images suivant la hauteur du DIV conteneur, au départ et en cas de redimensionnement de la page.

Cela fonctionne très bien sur tout les navigateurs.

Le problème sous Safari, c'est que le bandeau d'image se redimensionnent automatiquement sur la largeur de la fenêtre, alors que sur les autres navigateurs, il prend s'adapte à la largeur de l'ensemble des images à l'intérieur.

Donc pour Safari, j'ai du ajouter ce code à ma fonction "Arrangement":

function arrangement() {

	var H=$("#content").height()
	$(".image").height(H)
       
        var T=0;
	$('#bandeau .image').each(function(i, obj) {
		 var W=$(this).height() * $(this).attr('data-rapport');
		 T+=W;
		 $(this).width(W);
	});
	 
	$("#bandeau").width(T);
} 

Merci votre aide et n'hésitez pas à me contacter si vous aviez des questions

Marco
Modifié par pifoux (12 Mar 2014 - 20:11)