设置绝对定位后图片变大？col-lg-6容器内元素尺寸限制失效问题

问题原因 #

position: absolute属性会让元素脱离正常文档流，你遇到的尺寸异常是两点CSS规则共同作用的结果：

• 脱离文档流的元素默认不再受父容器的尺寸约束，父容器也不会将这个元素纳入自身高度计算
• 你给.title-image设置的width: 60%是百分比宽度，这类百分比取值的参考基准是最近一个position属性不为static的祖先元素。Bootstrap的col-lg-6默认是position: static，无法作为定位参考，所以这个60%宽度就会以上层有定位属性的元素、甚至整个浏览器视口为基准计算，自然比原本以列宽为基准时大很多。

解决方法 #

1. 给包裹.title-image的col-lg-6容器添加position: relative属性，让它成为图片的定位参考，这样图片的60%宽度就会以该列的宽度为基准计算，恢复正常大小：
   你可以自定义一个工具类实现：

.pos-relative {
  position: relative;
}

然后修改对应HTML结构：

<div class="col-lg-6 pos-relative">
  <img class="title-image" src="https://img.favpng.com/18/8/0/iphone-6s-plus-iphone-6-plus-apple-iphone-6s-png-favpng-2qagf951EWF4xaNNGb9WBPdNZ.jpg" alt="iphone-mockup">
</div>

2. 如果修改后图片位置不符合你的布局预期，可以给.title-image补充top、right、left、bottom属性微调位置即可，比如要让图片靠右展示可以加right: 10%。

内容的提问来源于stack exchange，提问作者martin jones