百度上大部分都说设置负padding和负margin值来解决这个问题,事实上这个方法书上就能查到,而且是比较简单的方法,我这里提供另外一种百度不到的方法以及一种更简易的方法,第一种方法利用absolute的垂直文档流自适应属性。想了解absolute的水平垂直文档流自适应的可以参考我CSS的文章,大概是讲absolute那几篇。下面来看解题思路,看下图:
图中的左边是一张图,右边是一段固定的文字,为什么固定的文字不定高呐?因为手机屏幕分辨率的问题,固定的文字也可能不定高。现在我们要让左边的图片高度等于右边文字的高度。
absolute方法代码:
//父容器
.fatherCtn{
position:relative;
}
.leftCtn{
position: absolute;
width: 48%;
top: 0;
bottom: 0;
img{
height: 100%;
width: 100%;
}
}
.rightCtn{
display: block;
margin-left: auto;
width: 48%;
}
利用flex,stretch属性(默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。)
//父容器
.fatherCtn{
display: flex;
align-items: stretch;
}
.leftCtn{
width: 48%;
img{
height: 100%;
width: 100%;
}
}
.rightCtn{
width: 48%;
}