Korrekte Bildgröße für Jumbotron

Ich verwende einen Jumbotron-Container im Bootstrap und versuche, ein Bild als Hintergrund zu verwenden. Es scheint jedoch so, als würden sich alle Bilder verzerren, wenn sich die Bildschirmgröße ändert oder nicht den richtigen Teil des Fotos anzeigt. Gibt es eine korrekte Größe, die ich einstellen sollte, um mein Bild zu speichern? Oder eine Möglichkeit, die Verzerrung auf dem Bildschirm zu verkleinern oder zu minimieren? Ich kann Ihnen meinen Code bei Bedarf zeigen.Korrekte Bildgröße für Jumbotron

Vielen Dank im Voraus!

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>

Quelle

2017-03-22 natem1270

_ "Ich kann Sie meinen Code bei Bedarf zeigen." _ Ja bitte – j08691

Bitte zeigen Sie, was Sie versucht haben. –

Dies ist normal, da Sie 'background: cover für das Bild' verwenden. Sie können jedoch einstellen, welcher Teil mit der Hintergrundposition^_^angezeigt werden soll. – Nicholas

Das ist völlig in Ordnung. Jetzt müssen Sie mit background-position spielen Jetzt, wenn Sie diesen Code ausführen. Sie werden ein Bild mit einigen süßen Hunden sehen. Jetzt auf kleineren Geräten sehen Sie die 3 mittleren Hunde. Warum? weil die background-position ist auf 50% auf x und 50% auf y (die Mitte des Bildes) gesetzt

Lassen Sie uns sagen, dass auf Handys möchten Sie die richtige Welpen mit dem schwarzen Kopf zeigen. Das ist einfach, Sie setzen einfach background-position auf 100% und 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>

alles so daß die Auflösung < Tablette Auflösung hat den schwarzen Kopf Welpen sehen.

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

Quelle

2017-03-22 19:24:53 Nicholas

Vielen Dank!Müsste ich für verschiedene Bildschirmgrößen unterschiedliche Hintergrundpositionen einstellen? – natem1270

Nur wenn es nicht angezeigt wird, was angezeigt werden soll. – Nicholas

Können Sie mir ein Beispiel geben, wie Sie das tun würden? Markierte deine Antwort als richtig – natem1270

-1

Während für den Code warten, haben Sie die ansprechende Klasse auf die Image-Tag hinzufügen?

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

Quelle

2017-03-22 19:17:13

das Bild ist ein Hintergrund des Jumbotron die reaktionsfähige Klasse wird in diesem Fall nicht viel tun – happymacarts

Sie die folgenden Regeln für die .jumbotron

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

Quelle

2017-03-22 19:31:53 Zeinab

Um die jumbotron Skala haben und immer das vollständige Hintergrundbild hinzufügen sollen, 0 die Höhe des jumbotron machen, dann einen Prozentsatz verwenden Padding, das dem Seitenverhältnis des Bildes entspricht, um die gleiche Menge an Polsterung im Jumbotron zu erzeugen.

Das Bild ist 1920x1080. Als Prozentsatz dargestellt, 1080/1920 = 56,25%. Wird es als oberes oder unteres Padding verwendet, wird das Jumbotron mit diesem Seitenverhältnis übereinstimmen. Dann können Sie den Text innerhalb des Jumbotrons absolut positionieren, wo immer Sie möchten. Ich habe dafür ein Element namens .jumbotron-text eingeführt.

* { 
 
    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>

Quelle

2017-03-22 19:42:36

Korrekte Bildgröße für Jumbotron

Antwort

Verwandte Themen