28172 sujets

CSS et mise en forme, CSS3

Definir la taille et la hauteur automatiquement

Bonjour à tous,
Je fais appelle à vos services car je suis face à un problème persistant. Smiley biggrin
Alors voilà, j'aimerais créer un sorte de blog, avec image, article... Je voudrais que les images s'affiche toutes de la même taille (bloc carré) même si on ne voit pas l'image entièrement. Pour ce j'ai crée un div et je lui ai appliqué un background-image et un 
background-size:100%
sur la longueur
Ceci me paraissait parfait jusqu'à que je me rende compte que si un image est trop petite sur la hauteur, un fond noir complète le bloc.
Comment puis je procéder ? Existe t-il un script javascript qui puissent récupérer la taille d'un background-image et suivant les valeurs je puissent définir
 background-size= auto 100%
ou 
background-size= 100% auto
.
Ou bien faut t-il que je procédé complétement différemment ?
J'espère que vous m'avez compris et que vous serez en position de m'aider. Thx Smiley biggrin
Hello,

une astuce est de faire : background-size: cover;

mais c'est du css3 donc ne marchera pas avec les anciens navigateurs.

Après sinon, il faut passer par du javascript pour faire ça.
+1 pour MrJO.
Il y a aussi background-size:contain qui peut t'intéresser.

Voici un peu de code. À tester avec les deux possibilités Smiley smile 

<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>background contain</title>
	<style type="text/css">
div {
width: 20%;
height: 4em;
margin: 2em auto;
background-image: url(http://www.alsacreations.com/css/img/logo-alsacreations-com.png);
background-position: center;
background-size: contain; /* Scalé dans le contenu */
						/* Voir aussi background-size: cover; */
background-repeat: no-repeat;
}
div:last-child {width: 33%; height: 8em;}
	</style>
</head>
<body>
	<div></div>
	<div></div>
</body>
</html>
Ah yes génial Merci bien à vous ! Je vais déjà partir la dessus et on verra plus tard pour les anciens navigateurs Smiley smile
Heu, hum, si les images font partie du contenu, il est plus approprié de les insérer avec la balise img plutôt que de les mettre en background.
Oui je sais bien mais si je les mets en img, mes blocs auront tous une taille différente ou alors les images seront déformés. A moins qu'il existe un moyen de faire que je ne connais pas !
Tu peux éventuellement mettre ta balise <img /> en min-width:100% - par exemple - dans une div, définir une taille fixe à ta div et lui appliquer un overflow: hidden.

Pas forcément super et si tu pousses plus loin, dans le cas ou tu as des images de proportions trop différentes tu risques en déformer.

Le nec plus ultra reste tout de même de travailler tes images en conséquences, car une optimisation est toujours bienvenue !
Sujet clos
Aller à