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

Question

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

.outside{
    width: 80%;
    max-width: 595px;
    position: relative;
    margin: auto 0px;
    display: inline-table;
    margin-bottom: 50px;
    border: 1px solid #cccccc;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0px 1px 7px 0px #cfcfcf;
    margin-top: 7px;
}
.container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}
.photo{
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 315px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(http://web.arjentienkamp.com/codepen/tinder/photo1.jpg);
    transform: translate3d(0px, 0px, 0px);
    cursor: move;
    user-select: none;
    touch-action: none;
    z-index: 1000;
}
.bottom{
    margin-top: 318px;
}

<div class="outside">
  <div class="container">	
    <div class="photo"></div>
    <div class="bottom"></div>
  </div>
</div>

Answer 1

如果我理解正确，将height: 100%和background-size: contain添加到您的.photo类中应该可以做到：

.outside{
    width: 80%;
    max-width: 595px;
    position: relative;
    margin: auto 0px;
    display: inline-table;
    margin-bottom: 50px;
    border: 1px solid #cccccc;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0px 1px 7px 0px #cfcfcf;
    margin-top: 7px;
}
.container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}
.photo{
    position: absolute;
    background-size: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(http://web.arjentienkamp.com/codepen/tinder/photo1.jpg);
    transform: translate3d(0px, 0px, 0px);
    cursor: move;
    user-select: none;
    touch-action: none;
    z-index: 1000;
}
.bottom{
    margin-top: 318px;
}

<div class="outside">
  <div class="container">	
    <div class="photo"></div>
    <div class="bottom"></div>
  </div>
</div>