Wie kann ich den IMG Flush in der Ecke bekommen?

Question

Derzeit meine img für diese Karte sieht wie folgt aus: jsFiddle

Dieser Teil der reactjs Komponente ist:

<div className='col-lg-4 emp-row'> 
         <div className="col-lg-4"> 
          <img src={this.props.details.avatar} alt=""/> 
         </div> 
       <div className="col-lg-8"> 
          <div> 
          <span className='name'> {this.props.details.firstName} &nbsp; 
           {this.props.details.lastName}</span> 
          <div> 
            {this.props.details.bio.slice(0, 80)} 
          </div> 
          </div> 
       </div> 
</div> 

Beachten Sie, wie es Räume rund um den img? Ich habe versucht, die Höhe zu ändern, aber es hilft nicht.

Wie kann ich den IMG so anzeigen lassen :?

Answer 1

Sie benötigen die Polsterung um den img Behälter zu entfernen:

.emp-row { 
    display: flex; 
    flex-direction: row; 
    /* padding: 10px 0;  <--- remove */ 
    border: 1px solid black; 
} 
.col-lg-4 {  
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    /* padding-left: 15px; <--- remove */ 
} 

https://jsfiddle.net/ss1syudL/5/

Answer 2

Sie verwenden bootstrap, so dass die col-lg-4 hat padding definiert sind, also hast du 2 Möglichkeiten.

Fügen Sie dem div, der das Bild enthält, eine zusätzliche Klasse hinzu und definieren Sie padding als Null.

eine Klasse zu den Bildern hinzufügen und wie CSS definieren:

<img class='mugshot' src='.../etc'> 

.mugshot{ 
margin: -10px; 
margin-left: -15px; 
}