我怎样才能让角落里的img冲洗？

Question

目前此卡的img如下所示：jsFiddle

这是reactjs组件的一部分：

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

请注意img周围是否有空格？我试图改变高度，但没有帮助。

如何让img显示如下：？

Answer 1

您需要移除img容器周围的填充：

.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

您正在使用引导程序，因此 col-lg-4 已定义了填充，因此您有2个选择。

在包含图像和定义的div中添加一个额外的类     填充为零。

为图像添加一个类并定义css，如：

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

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