При уменьшении ширины браузера у абсолютного div'a .block высота изменяется не так, как задумывалась: высота становится больше, чем размер картинки, хотя я всё указывал в процентах для обоих блоков. Подскажите, что делаю не так? Как сделать так, чтобы высота .block при измении ширины браузера была равна высоте картинки. Без использования JavaScript.
Ссылка на codepen ↓↓↓
https://codepen.io/mihail-kamahin/pen/axKdKV
body, p {
margin: 0;
}
*, *::after, *::before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.section {
padding: 80px 0;
background: #ceeeeb;
}
.wrapper {
position: relative;
}
.image {
max-width: 100%;
height: auto;
}
.block {
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
max-width: 300px;
width: 30%;
max-height: 559px;
height: 100%;
}
<div class="section">
<div class="container">
<div class="wrapper">
<img src="https://pp.userapi.com/c847021/v847021964/1f4d5a/aWI-FhPfH7I.jpg" alt="" class="image">
<div class="block"></div>
</div>
</div>
</div>