Ändern der Größe von Bildern in Bootstrap

Question

Ich habe für eine Weile über allgemeine Antworten gelesen. So oft ich versucht habe, damit zu spielen, kann ich das CSS einfach nicht zum Laufen bringen und auf meine Zeitleiste passen.

Ich verwende this Thema. Ich habe versucht, die About-Zeitleiste durch eigene Bilder zu ersetzen, aber die Bilder, die ich verwendet habe, sind alle unterschiedlich groß. Ich kann einfach nicht einmal eines meiner Bilder zu dem lustigen kleinen Kreis, in dem sich die Originale befanden, bringen und mir glauben, dass es lange her ist. Jede Hilfe wird WIRKLICH geschätzt. Ich lege den Code, den ich unten habe, aber ich weiß, dass sich einiges davon wiederholt, weil ich, wie gesagt, versucht habe, diese Bilder für eine Weile zu reparieren. Ich habe versucht, verschiedene CSS-Regeln für jedes einzelne Bild zu erstellen, aber ich habe auch an diesem Teil gescheitert. Ernsthaft jede Hilfe wird geschätzt.

<section id="about"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2 class="section-heading">About</h2> 
        </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <ul class="timeline"> 
        <li> 
         <div class="timeline-image"> 
          <img class="img-circle img-responsive1" src="img/about/1.jpg" alt=""> 
         </div> 
         <div class="timeline-panel"> 
          <div class="timeline-heading"> 
           <h4 class="subheading">Build or Scale your HR Capability</h4> 
          </div> 
          <div class="timeline-body"> 
           <p class="text-muted">Properly staffed and positioned Human Resources leaders and teams are strategic enablers of business performance and growth. We help you assess your current HR capabilities and build value adding talent management solutions that will help you move beyond compliance driven personnel management to business integrated Human Resources leadership.</p> 
          </div> 
         </div> 
        </li> 
        <li class="timeline-inverted"> 
         <div class="timeline-image"> 
          <img class="img-circle img-responsive1" src="img/about/2.jpg" alt=""> 
         </div> 
         <div class="timeline-panel"> 
          <div class="timeline-heading"> 
          <h4 class="subheading">Develop your Leaders</h4> 
          </div> 
          <div class="timeline-body"> 
           <p class="text-muted">Effective leadership is critical to attracting, engaging, and retaining the people you need to delight your customers and achieve your goals. We help you leverage the strengths of your managers and create insights and actions to develop their weaknesses through individualized feedback and coaching.</p> 
          </div> 
         </div> 
        </li> 
        <li> 
         <div class="timeline-image"> 
          <img class="img-circle img-responsive1" src="img/about/3.jpg" alt=""> 
         </div> 
         <div class="timeline-panel"> 
          <div class="timeline-heading"> 
           <h4 class="subheading">Focus and Engage your Team</h4> 
          </div> 
          <div class="timeline-body"> 
           <p class="text-muted">The most successful businesses have team members that understand the company's goals and are committed to achieving them. We help you create clarity of purpose and establish goal setting and performance management tools and processes that go beyond score keeping to create a culture of engagement. </p> 
          </div> 
         </div> 
        </li> 
        <li class="timeline-inverted"> 
         <div class="timeline-image"> 
          <h4>Be Part 
           <br>Of Our 
           <br>Story!</h4> 
         </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</section> 

und die CSS für die Bilder

element { 
} 
.img-circle { 
    border-radius: 50%; 
} 
.img-responsive { 
    display: block; 
    max-width: 50%; 
    height: auto; 
} 
img { 
    vertical-align: middle; 
} 
img { 
    border: 0; 
} 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Wichtig zu beachten, ich denke, die Verbindung früher Überprüfung mir wirklich helfen würde. Es gibt eine Reihe von CSS-Regeln, die auch auf das Bild angewendet werden, wie Sie aus dem HTML-Timeline-Bild sehen können, das ich hier auch einfügen kann, aber ich dachte, dass meine Frage lang genug war.

Danke für jede Hilfe.

Answer 1

Erstens, stellen Sie sicher, dass Sie den richtigen Klassennamen verwenden, img-responsive, in Ihrem HTML-Code, Sie img-responsive1 für Ihre img Elemente verwenden.

danach, in Ihrem CSS den max-width von% bis 100 img-responsive Klasse ändern

.img-responsive { 
    max-width: 100%; 
    height: auto; 
} 

, um sicherzustellen, dass das Bild an seine Container passen.

Answer 2

Sie das für Sie verwenden können, sind Bild (whitout Verwendung Bootstrap):

img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

Sie es für ein Bild wie folgt verwendet werden:

#image_id { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

note: wir don Bootstrap braucht das nicht. aber, wenn Sie mit Bootstrap Tey wollen Sie so tun können:

<div class="row"> 
<div class="col-md-4"> 
    <img class="thumbnail img-responsive" src="h.jpg" /> 
</div> 
</div>