28172 sujets

CSS et mise en forme, CSS3

Galerie d'images à 100% de largeur

Bonjour,

Je cherche à reproduire le positionnement qui se trouve sur la page Média de l'ineffable Christophe Mae.

En effet, si on redimensionne la fenêtre, il y a toujours:
- les images qui prennent toute la largeur de l'écran,
- un mélange d'image de petite taille et de grande taille.

Est-ce que ce mode de rendu est fait:
- grâce à une bibliothèque javascript?
- si oui, laquelle Smiley lol ?
- ou uniquement du positionnement css?

Merci pour vos analyses/commentaires Smiley cligne
Bonjour SuperMerguez Smiley lol

Je connaissais la propriété background-size.

Ma question porte plus sur le positionnement des blocs qui:
- occupent 100% de la place disponible, quelque soit la taille de la fenêtre
- restent bien alignés, margin compris.

Je ne comprends pas comment est fait le calcul, ni comment sont positionnés les blocs...

Voilà où j'en suis (pas de page en ligne, désolé Smiley decu ). Selon la taille de ma fenêtre, j'ai des "trous" dans ma grille... Une aide serait la bienvenue.

<!doctype html>
<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]> <!--><html class="no-js" lang="fr"> <!--<![endif]-->
<head>
		<meta charset="UTF-8">
		<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
		<title>test</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="css/knacss.css" media="all">
		<link rel="stylesheet" href="css/styles.css" media="all">
		
<style>
div { 
	border: 1px solid olive; 
	vertical-align: top;
	background: #fff;
}
#live {
	width: 100%;
	text-align: center;
	border: none;
}
.grand { width: 20em; height: 20em; float: left; background: url(img/1.png) center center no-repeat; background-size: auto; }
.petit { width: 10em; height: 10em; float: left; background: url(img/5.jpg) center center no-repeat; background-size: auto; }
</style>

</head>

<body>
	<div id="live">
		<div class="grand"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="grand"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
		<div class="petit"></div>
	</div>
</body>
</html>

Merci
Sujet clos
Aller à