我正在尝试在悬停时更改图像，我将默认图像放在尺寸为108x100的位置，并且假设在悬停时更改为的图像尺寸为161x143，但是当我悬停图像确实发生变化但不是放大时它变得更小
这是我的html（bootstrap）代码......
<div class="container-fluid">
<div class="row">
<div class="well" style="margin-bottom:0px;background-color:black;">
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="item active">
<div class="row" style="margin-left:8.3333%">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="graficki-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="stampa-svih-formata" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="web-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="kreativno-pisanje" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="pr" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="izrada-tv-i-radio-reklama" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="media-buying" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="3d-projektovanje" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="promocije-i-manifestacije" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="prevod-tekstova" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="prikupljanje-i-izrada-dokumenata-za-potrebe-firme" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
</div>
</div>
</div>
</div><!-- End Carousel -->
</div><!-- End Well -->
</div>
我的悬停变化jquery ......
$(document).ready(function(){
$("#graficki-dizajn").hover(function() {
$("#graficki-dizajn").attr("src","http://placehold.it/161x143");
}, function() {
$("#graficki-dizajn").attr("src","http://placehold.it/108x100");
});
$("#stampa-svih-formata").hover(function() {
$("#stampa-svih-formata").attr("src","http://placehold.it/161x143");
}, function() {
$("#stampa-svih-formata").attr("src","http://placehold.it/108x100");
});
$("#web-dizajn").hover(function() {
$("#web-dizajn").attr("src","http://placehold.it/161x143");
}, function() {
$("#web-dizajn").attr("src","http://placehold.it/108x100");
});
$("#kreativno-pisanje").hover(function() {
$("#kreativno-pisanje").attr("src","http://placehold.it/161x143");
}, function() {
$("#kreativno-pisanje").attr("src","http://placehold.it/108x100");
});
$("#pr").hover(function() {
$("#pr").attr("src","http://placehold.it/161x143");
}, function() {
$("#pr").attr("src","http://placehold.it/108x100");
});
$("#izrada-tv-i-radio-reklama").hover(function() {
$("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/161x143");
}, function() {
$("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/108x100");
});
$("#media-buying").hover(function() {
$("#media-buying").attr("src","http://placehold.it/161x143");
}, function() {
$("#media-buying").attr("src","http://placehold.it/108x100");
});
$("#3d-projektovanje").hover(function() {
$("#3d-projektovanje").attr("src","http://placehold.it/161x143");
}, function() {
$("#3d-projektovanje").attr("src","http://placehold.it/108x100");
});
$("#promocije-i-manifestacije").hover(function() {
$("#promocije-i-manifestacije").attr("src","http://placehold.it/161x143");
}, function() {
$("#promocije-i-manifestacije").attr("src","http://placehold.it/108x100");
});
$("#prevod-tekstova").hover(function() {
$("#prevod-tekstova").attr("src","http://placehold.it/161x143");
}, function() {
$("#prevod-tekstova").attr("src","http://placehold.it/108x100");
});
$("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").hover(function() {
$("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").attr("src","http://placehold.it/161x143");
}, function() {
$("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").attr("src","http://placehold.it/108x100");
});
});
并且jsfiddle ...... http://jsfiddle.net/s2b47/
我没有放大相同的图像，两个图像的外观和分辨率不同......我怎样才能达到我想要的放大效果？感谢任何帮助。
答案 0 :(得分：0)
您在图片上使用.img-responsive课程，这意味着他们将占用100％的可用空间（最多可达到自己的最大宽度）。因此，如果可用空间为100px，原始图像为120px，则需要100px。当您将其src更改为另一个更大的图像时，它仍然会占用100px。
答案 1 :(得分：0)
问题是.img responsive类缩小了布局以保持响应。但是你可以覆盖它，但我不确定你会非常喜欢这个结果：
<强> CSS
.img-responsive {
max-width: 90%;
}
.img-responsive:hover {
max-width: 100%;
}
.well {
max-height: 60px;
}
这是 DEMO
我建议你重新开始，也许使用容器导航栏的更多固定值，以便它不会移动。此外，分辨率迫使图像远小于其实际尺寸，在某些显示器上，人们很可能无法识别图像上描绘的内容。