我已经设置了响应式设计。现在我正在使用innerfade插件。它应该照片通过图片，但我注意到当页面的宽度发生变化时，图片的高度变小，并且不会覆盖整个所需的区域。所以当它从1440px的宽度缩小到320px时img高度是原始div的25％。我有一个css元素，目标是img {width：％;高度：自动;}。 jQuery中的容器高度设置为“100％”。我在JQuery counterheight中尝试'auto'以及在容器高度上尝试静态'400px'。使用innerfade时，如何让图像覆盖整个div？如果它是一个常规图像我不会有这个问题，但这是我第一次使用这个插件。任何帮助都将受到高度赞赏。
答案 0 :(得分：0)
<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>
答案 1 :(得分：0)
