<script type="text/javascript">
$(document).ready(function(){
$('#test').innerfade();
$(window).on('load', function(){
var sample = $('#test li').height() + 5;
$('.wrapper').css({'height': sample});
});
$(window).on('resize', function(){
var sample = $('#test li').height() + 5;
$('.wrapper').css({'height': sample});
});
});
</script>
<style type="text/css">
.wrapper {
position: relative;
}
#test img {
height: auto;
width: 100%;
}
#test li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
top: 0;
left: 0;
padding: 5px;
width: 100%;
}
.clear {
clear: both;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').innerfade();
$(window).on('load', function(){
var sample = $('#test li').height() + 5;
$('.wrapper').css({'height': sample});
});
$(window).on('resize', function(){
var sample = $('#test li').height() + 5;
$('.wrapper').css({'height': sample});
});
});
</script>
</head>
<body>
<div class="wrapper" style="width: 100%; max-width: 700px; margin: 30px auto; background-color: #666; height: 500px;">
<ul id="test" style="margin: 5% auto; padding: 0; list-style: none;">
<li><img src="images/img1.jpg" alt=""></li>
<li><img src="images/img2.jpg" alt=""></li>
<li><img src="images/img3.jpg" alt=""></li>
<li><img src="images/img4.jpg" alt=""></li>
<li><img src="images/img5.jpg" alt=""></li>
</ul>
</div>
<div class="clear"></div>
<div class="wrapper" style="width: 100%; max-width: 700px; margin: 30px auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit est, rutrum quis commodo sed, pharetra id erat. Pellentesque vel suscipit velit. Nulla nec ante hendrerit, sagittis neque id, ultricies urna. Etiam luctus nisl ac cursus cursus. In nec viverra ligula. Nullam porta tellus sit amet convallis pharetra. In hac habitasse platea dictumst. Aenean suscipit pretium mi in luctus. Phasellus vestibulum sem dictum, porta quam convallis, sollicitudin augue. Quisque elit metus, tristique vel maximus a, congue at mi. Duis pharetra, massa vel maximus consequat, ex ipsum faucibus augue, ultricies eleifend nisi velit vel ex.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet accumsan justo. Maecenas eget luctus magna, in dictum ex. Mauris posuere risus et magna aliquet dignissim. Sed non condimentum enim. Sed gravida tincidunt arcu, id cursus velit. Donec sit amet consequat dolor.
</p>
</div>
</body>
</html>