28172 sujets

CSS et mise en forme, CSS3

Image qui s'adapte a la page

Bonjour
Je veux créer un site je suis très bien avancé mais le problème est que pour mettre des images je les mets en background d'une div html.
Pour que l'image grandisse ou rapetisse quand on change d'écran ou qu'on zoom ou dézoom, j'ai voulu mettre les width et height en %. Mais je voudrais par exemple que ma div est une widht de 50% et une height de 2 x width, j'éspère que vous voyez ce que je veux dire.
Avez vous une solution ???
Merci d'avance
Modérateur
Bonjour,

1) Solution 1 : l'unité vw
50vw est égal à 50% de la largeur du viewport (en gros, ta fenêtre).
100vw est égal à 100% de la largeur de ton viewport.
On peut utiliser :

div {
 width: 50vw;
 height: 100vw;
}


2) solution 2: utilisation de padding
Si la div ne contient rien, on peut utiliser :

div {
 padding: 50% 25%;
 width: 0;
}

Ça affiche une div dont la largeur fait 50% de la largeur de son parent, et la hauteur fait 100% de la largeur de son parent.

Si la div a en plus un contenu, on peut combiner avec une position:absolute pour ce contenu.

Exemple :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
#conteneur {
	width: 500px;
	background: #f00;
}
.boite {
	position: relative;
	padding: 50% 25%;
	background: #eee;
	width: 0;
	margin: 0 auto;
	overflow: hidden;
}
p {
	position: absolute;
	width: calc(100% - 2em);
	top: 0;
	left: 0;
	padding: 1em;
}
</style>
</head>
<body>
<div id="conteneur">
	<div class="boite">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</div>
</div>
</body>
</html>

Il y a aussi d'autres solutions (en css ou en utilisant par exemple du javascript).

Amicalement,
Modérateur
Bonjour,

Soldat8889 a écrit :
Bonsoir !
Tu peux faire ça par JavaScript ou sinon le faire avec des Medias Queries CSS.


Les Medias Queries ne vont pas l'aider me semble-t-il !

Amicalement,
mina8000 a écrit :


Alors déjà merci pour ta réponse aussi franche x)

Et sinon comment on fait ?


Salut,

Notre copain parsimonhi n'a pas parlé que des % regarde bien sa réponse.

Pour plus d'aide, partage nous ton site Smiley smile
Modifié par JENCAL (01 Feb 2019 - 15:04)
Modérateur
Bonjour,
JENCAL a écrit :
Ya pas de lien porno pourtant là ^^

Parfois, y en a.

Mais ici, c'est un copier-coller d'une post fait ailleurs sur le forum pour un autre fil.

Amicalement,
Sujet clos
Aller à