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

Question

在div { test: /\.less$/, use: ['css-loader', 'less-loader'], }, 中，它的位置是绝对的，我想将其设置为100％以显示图像的全高。但它不起作用。如果不通过px设置高度，我怎么能这样做？

＆＃13;

＆＃13;

class="photo"

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

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>