Wie verhindere ich, dass ein Bild im Bootstrap überläuft?

-1

Ich versuche ein Thumbnail-Symbol in einem Jumbotron zu erstellen, das eine Beschreibung hat und nichts funktioniert. Kannst du bitte einen Blick darauf werfen und mir sagen, was ich falsch mache?Wie verhindere ich, dass ein Bild im Bootstrap überläuft?

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="jumbotron"> 
<h1 class="text-center">Kevin Mitnick</h1> 
<h3 class="text-center">The World's Most Famous hacker</h3> 
    <div class="thumbnail"><img src="https://i.ytimg.com/vi/Nn3O8XD1z0w/maxresdefault.jpg" alt="Kevin's Picture"> 
    <div class="caption text-center"><p>Kevin Mitnick talking in the popular YouTube channel "Big Think".</p></div> 
      </div> 
</div> 
</div> 
</div> 
</div>

und die CSS:

body { 
    margin-top: 60px; 
}

Quelle

2017-02-15 George Kech

versuchen Sie eine maximale Breite/Höhe zu Ihrem Bild hinzufügen – Pete

Sie haben Ihr Bild, um die Größe oder Breite und Höhe zu Ihrem img Tag Stile hinzufügen.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <div class="jumbotron"> 
 
<h1 class="text-center">Kevin Mitnick</h1> 
 
<h3 class="text-center">The World's Most Famous hacker</h3> 
 
    <div class="thumbnail"><img src="https://i.ytimg.com/vi/Nn3O8XD1z0w/maxresdefault.jpg" alt="Kevin's Picture"> 
 
    <div class="caption text-center"><p>Kevin Mitnick talking in the popular YouTube channel "Big Think".</p></div> 
 
      </div> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

Quelle

2017-02-15 15:41:25 MKAD

Ich weiß über Breite und Höhe. Da ich Bootstrap verwende, war ich das Bild, das automatisch mit einer Klasse oder etwas geändert wurde. –

Bootstrap hat eine Klasse, die diesen Effekt gilt: img-responsive. Dies gilt für das Bild max-width: 100%;, height: auto; und display: block;, so dass es gut zum übergeordneten Element skaliert. In der kommenden Bootstrap 4-Version wurde diese Klasse in img-fluid geändert.

<img src="..." class="img-responsive" alt="Responsive image">

Weitere Informationen finden Sie auf Bootstrap's site und der Bootstrap 4 Alpha page finden.

Quelle

2017-02-15 15:48:12 Marcelo

.img-responsive macht mir nichts. Das Bild ist immer noch riesig und überfüllt. –

Ich verwende diese Website, um die Webseite zu erstellen: https://codepen.io/georgebech/pen/Lxqrvb Ich habe Bootstrap aktiviert. Ich weiß nicht, warum es das nicht automatisch macht. –

@GeorgeKech Ich sehe das Problem, Sie verwenden die Alpha-Version von Bootsrap 4. In dieser Version heißt die Klasse 'img-fluid'. – Marcelo

Wenn ich das richtig verstehe, soll das Bild nicht außerhalb des übergeordneten Elements überlaufen? In diesem Fall können Sie eine overflow: hidden; hinzufügen oder für ein reaktionsfähiges und skalierbares Bild die Klasse img-responsive für das Image-Tag verwenden.

Quelle

2017-02-15 20:15:06 Dotol

Wie verhindere ich, dass ein Bild im Bootstrap überläuft?

Antwort

Verwandte Themen