18041 sujets

Questions générales et questions de débutants

Responsive Hauteur de page

Bonjour,
Dans une page, j'insère une série de photo avec .cycle jquery.
J'ai réussi à rendre les images 'responsive' en largeur mais je n'arrive pas pour la hauteur.
J'aimerai que les photos s'adaptent à la hauteur du navigateur (lorsqu'on change sa taille par exemple).
Sans changer tout mon code est il possible de faire ça?
Je suis débutant, j'aimerai réussir cette manip de manière la plus simple possible. Smiley biggrin
Ca m'aiderai beaucoup,
Merci!
Fred

Voici l'adresse: http://fredericuyttenhove.com/index_3.html#


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fred</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script src="jquery.cycle2.js"></script>
<script type="text/javascript">

$('#slider').cycle({
	fx: 'fade',
	speed: 300,
	next: '#slider',
	timeout:0
});	
</script>
<style>

div{
	max-width:1200px;
	margin:auto;
}
.responsive{
	width:100%;
}
</style>	

</head>

<body>

<div id="slider">
<img src="pics1200/uyttenhove_shoes.jpg" class="responsive" />
<img src="pics1200/CF036378.jpg" class="responsive" />
<img src="pics1200/uyttenhove_dirt.jpg" class="responsive" />
</div>
</div>

</body>
Bonjour,

J'utilise moi aussi le plugin Cycle dans sa version 2.

Pour un slide à 100% de hauteur de la page j'applique un height:100vh sur l'élément parent.

Le résultat en ligne : Slideshows
Merci Olivier,
Est ce que tu peux me montrer ca dans mon code stp?
Ou dois je placer, height:100vh ?
Ok j'ai fait par contre du coup mon image ne garde plus ses proportions
: /
Une idée?


div{
	max-width:1200px;
	margin:auto;
}

.responsive{
	width:100%;
	height:100vh;

}
</style>	

</head>
Si tu rend une image reponsive en largeur ET en hauteur, ton image va être déformer..... Imagine que ton image soit un carré, si je mets mon écran en rectangle bonjour les dégâts, l'image va devoir s’aplatir etc..

mais bon, si tu veux quand même poursuivre dans cette voir je te conseil de suivre les conseils d'Olivier C

mettre sur chacune de tes images un 
    height: 100%;
    width: 100%;


d'appliquer ta sur div slider : 
    height: 100vh;


et surtout !!! enlever les 
visibilty:hidden

et les remplacer par des display:none, car visitbility hidden va cacher t'es éléments, mais physiquement ils sont toujours présent, ils prennent toujours de la place, alors que display none, ils sont littéralement supprimer

il faut également enlever le petit 
margin:8px
de ton body, car c'est lui qui créer l'ascenseur.
Modifié par JENCAL (10 Oct 2016 - 16:33)
Merci Jencal,
effectivement l'image se déforme d'office si elle reste calé sur la hauteur et largeur de la page
Et si je veux pour que l'image garde le meme ratio, rajouter du blanc a droite et a gauche?
Merci pour les code mais j'avoue que je ne sais pas exactement ou les mettre. Smiley sweatdrop
J'en suis ici mais ca ne change rien, si j'enlève le margin les photos ne sont plus au milieu.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fred</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script src="jquery.cycle2.js"></script>
<script type="text/javascript">

$('#slider').cycle({
	fx: 'fade',
	speed: 300,
	next: '#slider',
	timeout:0,
});	
</script>

<style>



div{
	max-width:1200px;
	margin:auto;
}

.responsive{
	width:100%;
	

}
</style>	

</head>

<body>

<div id="slider" 
	height: 100vh;
    >
<img src="pics1200/uyttenhove_shoes.jpg" height: 100%; width: 100%; class="responsive" />
<img src="pics1200/CF036378.jpg" height: 100%; width: 100% class="responsive" />
<img src="pics1200/uyttenhove_dirt.jpg" height: 100%; width: 100% class="responsive" />
</div>
</div>



</body>
par contre, quand je vois ça..
<div id="slider" 
	height: 100vh;
    >


je tic un peu ... Smiley plante mais je suis indulgent Smiley smile

Je te conseil juste un truc :
Imprègne toi des bonnes méthodes de programmations web dès aujourd'hui.

Pour cela il existe beaucoup de cours sur internet, sur Alsacréation, OpenClassRooms, et j'en passe...
Je te conseil donc d'apprendre les bases, car si tu ne comprend pas ce que tu fais tu vas à la rencontre de problèmes.


Pour ce qui est de ton problème actuel je te conseil déjà de virer tout le css dans le html, et faire un fichier à part et de le linker, cela te permettra en premier lieu d'avoir une bonne visibilité de ce que tu fais

Ensuite, tu as définie des classes pour tes images : 
class="responsive"

Utilise les dans ton css pour gérer hauteur, largeur, couleur, etc... (ne pas confondre avec les ID)

Ensuite tu pourra appliquer à ces classes ou id, le bon codes css, tel qu'Oliver ou moi t'avons dit précédemment.
freddd a écrit :
Merci Olivier,
Est ce que tu peux me montrer ca dans mon code stp?
Ou dois je placer, height:100vh ?

Pas le temps je suis au boulot... mais sur le principe l'image est à placer en background :
.slideshow {
    position: relative;
    width: 100%;
    height: 100vh;
}

.slideshow .item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    background-position: 50% 50%;
}

Mon code perso dans son contexte : Github
Top merci pour le principe.
J'ai clairement sauté les bases, je dois faire une mauvaise manip car je n'y arrive pas.
Peut être si vous me mettez tout le code?
J'avoue que ca m'aiderait à fond
freddd a écrit :

Peut être si vous me mettez tout le code?


Je suis navré, mais ce n'est pas t'aider que de mettre tous le code, et cela ne t'aiderais pas, mais te laisserais dans la mer** car tu n'aurais pas compris. Le but du forum est d'aider sur les problèmes de prog, pas de coder "à la place" des autres.
j'ai essayé ce code là Jencal

ca à l'air de marcher



    height: gamin;
    width: pas cool;

    visibilty: "je t'aide pas parce ce serait trop facile" 

    margin: tu serais pas flic? ou fonctionnaire?

    allé ciao et merci pour l'entraide
Si tu lis mon premier post sur le sujet, je te donne pas mal de réponse, Olivier C te donne pas mal de réponse ; mais le problème c'est que tu ne sais pas intégré le code et que tu demande qu'on te fournisse TOUT... mais ta dernière remarque avec ton pseudo code me montre que le gamin c'est bien toi.
Essaye quand même d'appliquer les conseils des autres quand ils prennent sur leur temps pour te répondre.
j'avais besoin d'un coup de main rapide et efficace,
m'aider et essayer de trouver des solutions mais juste pas jusqu'au bout pcq tu déclares que ce serait pas me rendre service,
imagine la meme scene dans la rue,
excuse mais j'ai du mal,
mais sans rancune
Enfaite, j'arrive pas à imaginer la même scène dans la rue.. car ici on est sur un forum sur l'apprentissage du web.. mais sans rancune on s'éloigne du sujet.
Très difficile de comprendre ce sujet Smiley decu
En effet l’incompréhension du responsive est évident,
un portable (et tout tactile) n'a pas de hauteur mais un défilement et un zoom !
il n’empêche que nous allons fixer nos width a 90 % mais pas la hauteur Smiley cligne

Ce qui vous trompe ce sont ces usines à gaz de Jquery !
Je vous conseil d'adopter un model a vous ce sera mieux maîtrisé !
Sujet clos
Aller à