我怎样才能让img在角落里冲洗？答案

【问题标题】：How can I get the img flush in the corner?我怎样才能让img在角落里冲洗？
【发布时间】：2017-11-26 17:00:33
【问题描述】：

目前我的这张卡的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 像这样显示：？

【问题讨论】：

您的意思是完全与左上角齐平，还是整个左侧？我做了一个未成年人fiddle change here，但我不确定它是否接近你想要的，但图像在同一个位置。
@PaulT。我更新了设计以澄清
您没有正确使用 Bootstrap 网格 - col- 元素必须是 row 的子元素才能正常工作。

标签： html css reactjs twitter-bootstrap-3

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：