用固定高度和宽度无法让响应式图片绑定juery效果？

Question

上面的图片加了JQ效果后，只能用固定的图片宽度和高度，不能用百分比，缩小就不能响应。下面的三张图片没加效果就可以变成响应式的。我是想 看看能不能将效果跟图片绑定在一起响应。html代码：<div class="row item-news"> <div class="col-sm-12 col-xs-12">  <ul > <li class="col-sm-4 col-xs-12 boxgrid captionfull">            <img src="images/3-1.png" class="img-responsive">    <div class="cover boxcaption">          <h4>JIANGSU IN CHINA</h4>              <p>by Bily Jones from Germany</p>          <button type="button" class="btn btn-primary btn-danger"><a href="#">READ MORE</a></button>          </div> </li></ul></div>css代码：.container2 .item-news ul li img{ margin: 0 auto;}.b1{ margin-top: 2%;}.boxgrid{ width: 340px; height: 227px;//这里用百分比就会出错 position:relative; overflow: hidden; margin:0 -5% 0 8%;}.boxgrid h4{ color:#dddbd8; text-align: center; padding-top: 14%;}.boxgrid img{ position: absolute; top:0; left:0; border:0;}.boxgrid p{ padding:0 10px; color:#dddbd8; text-align: center;} .boxgrid .btn{ background: #ec6941; margin:5% 32%;} .boxgrid a{ color: #fff;}.boxcaption{ float:left; position:absolute; background:#000; height:100%; width:100%; opacity:.8; /* For IE 5-7 */ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}.captionfull .boxcaption{ top:260px; left:0px;}jquery代码:$('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300}); });

Answer 1

不知道你去哪弄的代码，copy个html代码元素都打不全