Здравствуйте уважаемые форумчане. Никак не могу найти ответа (решения) на вопрос: как сделать в данном примере адаптивную высоту. Буду очень благодарен за Вашу помощь.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat laboriosam esse rem ut velit dolores accusamus voluptatem possimus, temporibus, earum enim autem, impedit pariatur necessitatibus. Possimus placeat ad eos velit.</p>
<div class="block">
<div class="block__list--wrap">
<ul class="block__list">
<li class="block__item active">
<img src="images/1.jpg" alt="">
</li>
<li class="block__item">
<img src="images/2.jpg" alt="">
</li>
<li class="block__item">
<img src="images/3.jpg" alt="">
</li>
<li class="block__item">
<img src="images/4.jpg" alt="">
</li>
</ul>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero perferendis porro quos, sapiente quod dolores nam voluptatum at quibusdam ipsa odio placeat sequi, officia similique quae libero quo esse numquam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, magni tenetur a eos quibusdam laboriosam ut, molestias cum velit voluptatibus libero ea cupiditate harum. Ipsum est aperiam aspernatur praesentium nisi!</p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/main.js"></script>
</body>
</html>
.clearfix:before, .clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
div.block {
max-width: 600px;
height: 338px;
margin: auto;
padding: 10px;
border: 1px solid #359FBC;
background: #fff;
}
div.block__list--wrap {
max-width: 600px;
height: 338px;
overflow: hidden;
}
ul.block__list {
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
li.block__item {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.active {
position: relative;
z-index: 1;
}
img {
max-width: 100%;
display: block;
}
