Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
  <div class="item active">
  <a href="包含图片一文章路径">
   <img src="/UploadFiles/2021-04-02/图片一路径">
 


由上述代码可以看到，每个图片（img）在加载（onload）的时候都调用了一个函数DrawImage,在这个函数中我们就可以调用jqthumb.js的方法来控制图片的大小了，注意该函数一定要加在上述HTML代码前，否则第一次加载的时候控制图片大小会失败（因为页面加载时序的原因），函数代码如下： 




<!--导入插件-->
<script type="text/javascript" src="/UploadFiles/2021-04-02/jqthumb.js">

在该函数中我们调用了jqthumb方法来定义一个宽度和轮播插件相同高度为300px的原图片的缩略图，该缩略图是由图片的中心开始生成的（注意其position属性的设置），这样即使图片的大小变化了，也可以显示图片的主要内容，而且图片比率可以保持不变。 
来源：顶求网


如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是所有内容，希望能对大家有所帮助，也希望大家多多支持。