Html 如何在div绝对位置使用100%高度来显示完整图像高度？

在div

class=“photo”

中，它的位置是绝对的，我想将其设置为100%以显示图像的全高。但它不起作用。我如何在不通过px设置其高度的情况下执行此操作

。外部{
宽度：80%；
最大宽度：595px；
位置：相对位置；
保证金：自动0px；
显示：内联表；
边缘底部：50px；
边框：1px实心#中交；
填充：0；
边界半径：8px；
盒影：0px 1px 7px 0px#cfcfcf；
边缘顶部：7px；
}
.集装箱{
宽度：100%；
左边距：自动；
右边距：自动；
显示：内联块；
}
.照片{
位置：绝对位置；
显示：块；
左边距：自动；
右边距：自动；
宽度：100%；
高度：315px；
背景尺寸：封面；
背景重复：无重复；
背景图片：url(http://web.arjentienkamp.com/codepen/tinder/photo1.jpg);
转换：translate3d（0px，0px，0px）；
光标：移动；
用户选择：无；
触摸动作：无；
z指数：1000；
}
.底部{
边缘顶部：318px；
}

---

如果我理解正确，请将

高度：100%

和

背景尺寸：contain

添加到您的

中。photo

课程应该这样做：

。外部{
宽度：80%；
最大宽度：595px；
位置：相对位置；
保证金：自动0px；
显示：内联表；
边缘底部：50px；
边框：1px实心#中交；
填充：0；
边界半径：8px；
盒影：0px 1px 7px 0px#cfcfcf；
边缘顶部：7px；
}
.集装箱{
宽度：100%；
左边距：自动；
右边距：自动；
显示：内联块；
}
.照片{
位置：绝对位置；
背景尺寸：包含；
显示：块；
左边距：自动；
右边距：自动；
宽度：100%；
身高：100%；
背景尺寸：封面；
背景重复：无重复；
背景图片：url(http://web.arjentienkamp.com/codepen/tinder/photo1.jpg);
转换：translate3d（0px，0px，0px）；
光标：移动；
用户选择：无；
触摸动作：无；
z指数：1000；
}
.底部{
边缘顶部：318px；
}

在

上使用底部0和顶部0，而不是高度。照片

-

背景尺寸：包含

和

高度：100%

您希望您的图像是其包含元素的100%、全屏的100%还是其固有高度的100%？请指定您需要的是容器的全宽还是图像的全尺寸？