Si je fais appel à vous aujourd'hui, c'est parce que je me retrouve confronté à un problème que je ne parviens pas à résoudre concernant Bootstrap.
Comment fais t'on pour qu'une image prenne la totalité de l'espace (hauteur et largeur) des colonnes qui la contienne? Cela peut paraître idiot mais je ne parviens pas, malgré mes nombreuses recherches, à comprendre la logique de Bootstrap concernant la taille des images.
J'ai besoin de cette info afin de parvenir à rendre le travail de l'activité 2 du cours. Afin de vous aider à comprendre mon problème, je vais transmettre ci-dessus l'ébauche de mon code (j'ai encadrer les container afin de mieux me repérer visuellement, d'ailleurs je ne comprends pas non plus pourquoi, si on applique un container à body ce dernier est décaler vers la droite par rapport à ceux du header nav et footer). Je pense avoir saisi l'utilisation des colonnes (dites le moi, si ce n'est pas le cas), mais je ne parvients jamais à obtenir le rendu attendu concernant les images, elles se mettent à l'endroit voulu mais leurs tailles n'est pas la bonne. Je vais vous fournir également une copie du travail attendu.
Je vous serait vraiment reconnaissante de bien vouloir prendre quelques minutes pour m'aider.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La maison de l'architecte</title>
<meta name="description" content="Le site de la maison de l'architecture">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/* Styles de base */
body {
font-family: 'Bitter', serif;
background-color: #eef;
color: #259;
}
nav img {
width: 100%;
height: auto;
}
.btn-lg {
width: 50px;
height: 50px;
border-radius: 25px;
}
.container{
text-align: center;
border: 5px blue inset;
}
/* Styles pour les smartphones */
#left, #side1, #side2 {
padding: 10px 10px 0 10px;
}
/* Styles pour les tablettes */
@media (min-width: 768px) {
#left{
padding: 0;
}
#side1 {
padding: 10px 5px 0 0;
}
#side2 {
padding: 10px 0 0 5px;
}
}
/* Styles pour les écrans moyens et grands */
@media (min-width: 992px) {
#side1, #side2 {
padding: 0 0 10px 10px;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="hidden-xs col-sm-1 col-md-1"><a href="#"><img src="maison.png" alt="logo"></a></div>
<div class="col-xs-12 col-sm-11 col-md-11"><h1>La maison de l'architecte</h1></div>
</div>
</header>
<nav>
<div class="container">
<div id="left"><div class="col-xs-12 col-sm-12 col-md-8"><a href="#"><img class="photo" src="city1.jpg" alt="Nos réalisations"></a></div></div>
<div id="side1"><div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side1.jpg" alt="Nos projets"></a></div></div>
<div id="side2"><div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side2.jpg" alt="Notre ambition"></a></div></div>
</div>
</nav>
<footer>
<div class="container">
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</div>
</footer>
</body>
</html>
- Edité par amandine alenda 17 juin 2018 à 18:58:21
Bootstrap problème avec la taille des images
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
