如何在角落获得img刷新？

Question

Currently my img for this card looks like this: jsFiddle

This is part of the reactjs component:

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

Notice how there are spaces around the img ? I tried to change the height but it does not help.

How can I get the img to display like this:?

Answer 1

You need to remove the padding around the img containers:

.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

You are using bootstrap, so the col-lg-4 has padding defined, thus you have 2 choices.

Add an extra class to the div containing the image and define padding as zero.

Add a class to the images and define css like:

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

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