При уменьшении ширины экрана изображение само подстраивает пропорции и уменьшается
Но при уменьшении высоты изображение не подстраивается под экран. Как решить эту проблему?
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style>
html,body{
height: 100%;
width:100%;
}
.image{
position: relative;
left: 15%;
top: 15%;
height:70%;
width:70%;
}
#img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="image">
<img id="img" src="http://magic-kniga.ru/files/item_main_images/23000.jpg">
</div>