我已经设置了一个响应式设计。现在我正在使用内部褪色插件。它像它应该的那样通过图片进行，但我注意到当页面的宽度发生变化时，图片的高度会变小，并且没有覆盖所需的整个区域。因此，当它从 1440px 的宽度缩小到 320px 时，img 高度在原始div 上是 25%。我有一个针对img {width：%; height：auto;}的css元素。jQuery 中的容器高度设置为 '100%'。我尝试了JQuery计数器高度中的"自动"以及静态"400px"的容器高度。在使用 innerfade 时，我该怎么做才能让图像覆盖整个div？如果它是一个常规图像，我就不会有这个问题，但这是我第一次使用这个插件。任何帮助将不胜感激。
将 li #test 更改为订单列表命名的任何 id。将"包装器"更改为图片要进入的div 的名称。这确实有效。我只是不知道如何在这里添加图像。
<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>将 li #test 更改为订单列表命名的任何 id。将"包装器"更改为图片要进入的div 的名称。这确实有效。我只是不知道如何在这里添加图像。