28112 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Mon image, malgré mes différents codes, n'est toujours pas responsive, elle reste à la taille initiale.
Je souhaiterais une hauteur de 100% (100% de l'image et 100% de l'écran) quelque soit le support.
Merci pour votre aide Smiley smile
.parallax {
	position: relative;
	width: 100%;
	height: 1000px;
	margin-top: 0px;
	overflow: hidden;
	z-index: 9;
	margin-bottom: 0px;
}
.parallax img {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	min-height: 100%;
	height: 1264px;
	object-fit: cover;
}

Y-a-il moyen de décider de caler l'iumage à droite, à gauche ou au centre ?
Encore Merci !
ED
Je pige pas : si tu limites volontairement la hauteur du conteneur à 1000px et qu'en plus tu as un overflow hidden, tu ne peux pas avoir ton image qui fait 100% de la hauteur de l'écran dès qu'il fait plus de 1000px de haut.
Dans l'autre sens (écran moins haut que 1000px) un 100vh à la place de 100% devrait faire l'affaire. Ou plutot un min(100%, 100vh) pour avoir les deux conditions énoncées.
Bonjour kerlutinoec,
Merci beaucoup, et tu as raison sur tes interrogations ^^ mais même avec ce code, l'image n'est pas "élastique" Smiley decu
.parallax {
	position: relative;
	width: 100%;
	min-height: 100vh;
	margin-top: 0px;
	overflow: hidden
	z-index: 9;
	margin-bottom: 0px;
}
.parallax img {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	min-height: 100%;
	height: 100vh;
	object-fit: cover;
}

Bon après-midi,
ED
Modérateur
el_debutanti a écrit :
Bonjour kerlutinoec,
Merci beaucoup, et tu as raison sur tes interrogations ^^ mais même avec ce code, l'image n'est pas "élastique" Smiley decu
ED

Pourtant on dirait bien que si... https://jsfiddle.net/undless/21hmbokp/

Il nous manque peut être des trucs autour ?
"élastique" ?

[...] Je crois que j'ai compris ce que tu veux !

.parallax {
	position: relative;
	width: 100%;
	height: 1000px;
	margin-top: 0px;
	overflow: hidden;
	z-index: 9;
	margin-bottom: 0px;
}
.parallax img {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: auto;
	object-fit: cover;
}


Pas sûr du résultat sans un codepen...
Meilleure solution
Bonjour,
Vous deux avez raison Smiley biggrin Ça fonctionne... mais, pas toujours.
Oui Laurent_ il doit y avoir des trucs autour. Smiley biggol Je vais y jeter un œil.
Mais problème résolu, MERCI A VOUS !
Y-a-t-il moyen de décentrer l'image selon la taille de l'écran ? Qu'elle reste calée en bas, en haut, à droite ou à gauche ?
Merci encore,
ED