Taille d'image correcte pour Jumbotron

J'utilise un conteneur jumbotron dans bootstrap et j'essaie d'utiliser une image comme arrière-plan. Cependant, il semble que toutes les images se déforment à mesure que la taille de l'écran change ou n'affiche pas la partie correcte de la photo. Y at-il une taille correcte que je devrais définir enregistrer mon image? Ou un moyen de se débarrasser de/minimiser la distorsion sur le redimensionnement de l'écran? Je peux vous montrer mon code si nécessaire.Taille d'image correcte pour Jumbotron

Merci d'avance!

CSS:

*{ 
    margin: 0; 
    padding: 0; 
} 

.navbar-default{ 
    background-color: rgb(66, 134, 244); 
} 
.under { 
    border-bottom: 15px solid rgb(66, 134, 244); 
} 
.size { 
    width: 300px; 
} 
.jumbotron{ 
    height: 400px; 
    background: url("../images/parakeet.jpg"); 
    background-size: cover; 
} 

HTML 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="css/custom.css" rel="stylesheet"> 
</head> 
<body> 

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 

<!-- Button nav for small screens --> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
<!-- Brand name --> 

     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 

<!-- Makes nav not expand on resize --> 

    <div class="collapse navbar-collapse" id="myNavbar"> 

<!-- Menu --> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 

<!-- Dropdown menu --> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
<!-- Non dropdown --> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
    </div> 
</nav> 
     <div class="jumbotron text-center under"> 
    <h1>Website Heading</h1> 
     <p>Information about the website!</p> 
    </div> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4 text-center"> 
       <h2>Text</h2> 
       <p>More text describing the heading!</p> 
       <span class="glyphicon glyphicon-leaf size"></span> 

      </div> 
        <div class="col-sm-4 text-center"> 
       <h2>Text</h2> 
       <p>More text describing the heading!</p> 
       <span class="glyphicon glyphicon-hourglass btn-lg"></span> 

      </div> 

      <div class="col-sm-4 text-center"> 
       <h2>Text</h2> 
       <p>More text describing the heading!</p> 
       <span class="glyphicon glyphicon-plus btn-lg"></span> 
      </div> 

     </div> 

    </div> 
</body> 
</html>

Source

2017-03-22 natem1270

_ "Je peux vous montrer mon code si nécessaire." _ Oui s'il vous plaît – j08691

S'il vous plaît montrer ce que vous avez essayé. –

Ceci est normal puisque vous utilisez 'background: la couverture pour l'image' Cependant, vous pouvez modifier la partie à afficher avec la position d'arrière-plan^_ ^. – Nicholas

qui est parfaitement bien. Maintenant, vous devez jouer avec background-position Maintenant, si vous exécutez ce code. Vous verrez une image avec des chiens mignons. Maintenant, sur les appareils plus petits, vous verrez les 3 chiens du milieu. Pourquoi? parce que le background-position est fixé à 50% sur x et 50% sur y (Le centre de l'image)

Disons que sur les mobiles, vous voulez montrer le droit le plus chiot avec la tête noire. C'est simple, vous venez de régler background-position à 100% et 50%.

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.navbar-default{ 
 
    background-color: rgb(66, 134, 244); 
 
} 
 
.under { 
 
    border-bottom: 15px solid rgb(66, 134, 244); 
 
} 
 
.size { 
 
    width: 300px; 
 
} 
 
.jumbotron{ 
 
    height: 400px; 
 
    background: url("https://puppydogweb.com/wp-content/uploads/2015/05/54_2383_Cute-Puppies-puppies-16094619-1280-800.jpg"); 
 
    background-size: cover; 
 
    background-position: 0 50%; 
 
}

<body> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 

 
<!-- Button nav for small screens --> 
 

 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
<!-- Brand name --> 
 

 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 

 
<!-- Makes nav not expand on resize --> 
 

 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 

 
<!-- Menu --> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 

 
<!-- Dropdown menu --> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
<!-- Non dropdown --> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
     <div class="jumbotron text-center under"> 
 
    <h1>Website Heading</h1> 
 
     <p>Information about the website!</p> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-4 text-center"> 
 
       <h2>Text</h2> 
 
       <p>More text describing the heading!</p> 
 
       <span class="glyphicon glyphicon-leaf size"></span> 
 

 
      </div> 
 
        <div class="col-sm-4 text-center"> 
 
       <h2>Text</h2> 
 
       <p>More text describing the heading!</p> 
 
       <span class="glyphicon glyphicon-hourglass btn-lg"></span> 
 

 
      </div> 
 

 
      <div class="col-sm-4 text-center"> 
 
       <h2>Text</h2> 
 
       <p>More text describing the heading!</p> 
 
       <span class="glyphicon glyphicon-plus btn-lg"></span> 
 
      </div> 
 

 
     </div> 
 

 
    </div> 
 
</body>

donc tout ce qui a une résolution < résolution de la tablette verra le chiot de la tête noire.

@media (max-width: 768px) { 
    .jumbotron{ 
    background-position: 100% 50%; 
    } 
}

Source

2017-03-22 19:24:53 Nicholas

Merci!Devrais-je définir différentes positions d'arrière-plan pour différentes tailles d'écran? – natem1270

Seulement si ce n'est pas ce que vous voulez montrer. – Nicholas

Pourriez-vous me donner un exemple de la façon dont vous feriez cela? Marqué votre réponse comme correcte – natem1270

-1

En attendant le code, avez-vous ajouté la classe en réponse à la balise image?

<img src="picture.jpg" class="img-responsive">

Source

2017-03-22 19:17:13

l'image est un fond du jumbotron la classe sensible ne fera pas grand chose dans ce cas – happymacarts

vous devez ajouter les règles suivantes au .jumbotron

background-repeat:no-repeat; 
background-size:contain; 
background-position:center;

Source

2017-03-22 19:31:53 Zeinab

Pour avoir l'échelle de jumbotron et toujours afficher l'image en arrière-plan, faire la hauteur du jumbotron 0, utilisez alors un pourcentage de un remplissage qui correspond au format de l'image pour créer la même quantité de rembourrage dans le jumbotron.

L'image est 1920x1080. Représenté en pourcentage, 1080/1920 = 56,25%. Appliqué comme un rembourrage haut ou bas, cela fera jumbotron correspondre à ce ratio d'aspect. Ensuite, vous pouvez absolument positionner le texte à l'intérieur du jumbotron où vous voulez. J'ai introduit un élément appelé .jumbotron-text pour cela.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.navbar-default { 
 
    background-color: rgb(66, 134, 244); 
 
} 
 

 
.under { 
 
    border-bottom: 15px solid rgb(66, 134, 244); 
 
} 
 

 
.size { 
 
    width: 300px; 
 
} 
 

 
.jumbotron-text { 
 
    position: absolute; 
 
    top: 2em; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.jumbotron { 
 
    height: 0; 
 
    position: relative; 
 
    padding: 56.25% 0 0 !important; 
 
    background: url('http://i.imgur.com/OXMygdn.jpg') 0 0 no-repeat; 
 
    background-size: cover; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="css/custom.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 

 
     <!-- Button nav for small screens --> 
 

 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
     <!-- Brand name --> 
 

 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
     </div> 
 

 
     <!-- Makes nav not expand on resize --> 
 

 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 

 
     <!-- Menu --> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 

 
      <!-- Dropdown menu --> 
 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Page 1-1</a></li> 
 
       <li><a href="#">Page 1-2</a></li> 
 
       <li><a href="#">Page 1-3</a></li> 
 
      </ul> 
 
      </li> 
 
      <!-- Non dropdown --> 
 
      <li><a href="#">Page 2</a></li> 
 
      <li><a href="#">Page 3</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <div class="jumbotron text-center under"> 
 
    <div class="jumbotron-text"> 
 
     <h1>Website Heading</h1> 
 
     <p>Information about the website!</p> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 text-center"> 
 
     <h2>Text</h2> 
 
     <p>More text describing the heading!</p> 
 
     <span class="glyphicon glyphicon-leaf size"></span> 
 

 
     </div> 
 
     <div class="col-sm-4 text-center"> 
 
     <h2>Text</h2> 
 
     <p>More text describing the heading!</p> 
 
     <span class="glyphicon glyphicon-hourglass btn-lg"></span> 
 

 
     </div> 
 

 
     <div class="col-sm-4 text-center"> 
 
     <h2>Text</h2> 
 
     <p>More text describing the heading!</p> 
 
     <span class="glyphicon glyphicon-plus btn-lg"></span> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

Source

2017-03-22 19:42:36

Taille d'image correcte pour Jumbotron

Répondre

Questions connexes