用固定高度和宽度无法让响应式图片绑定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代码元素都打不全