Задача следующая - нужно чтобы родительский div блок был равен высоте содержимого (изображению) и располагался по вертикали в центре при этом адаптивность по высоте сохранялась (само изображение).
html,
body {
height: 100vh;
margin: 0;
}
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cont {
display: table;
position: relative;
margin: 0 auto;
position:relative;
height:60%;
padding-bottom: 100px;
width: 300px;
border: 3px solid #000;
}
.image
{
position:relative;
height: 100%;
width: 100%;
}
img {
/* position: absolute; */
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
/* top: 0; */
}
.footer {
background-color:red;
position: absolute;
width:100%;
height: 100px;
bottom:0;
}
<div class="cont">
<div class="image">
<img src="http://placehold.it/750x350" alt=""></div>
<div class="footer">
</div>
</div>
magrin: auto
и display:table
но они убивают адаптивность.