The ultimate solution for image deformation in the Bootstrap carousel plug in uses jqthumb. js

I used BootStrap's carousel (carousel) plug-in to show the pictures in the article. I automatically grab the first picture of the article in the program as the picture to be displayed in the carousel control. Because the picture size of the article is not 1, and the size of the carousel plug-in is basically fixed, the picture is deformed when displaying. I found a lot of middle ways on the Internet and didn't solve them (the process is tortuous, I won't repeat it), Until you find this scaling plug-in for Jquery-jqthumb. js. Let's see how to use it and how to use it to control the size of pictures in carousel controls. Moreover, it can not deform and display the main parts of pictures (similar to the mixed arrangement effect of pictures in WeChat circle of friends-I don't know if you have noticed that no matter what the ratio of pictures you send in WeChat circle of friends is, they can always be perfectly arranged without deformation). First let's look at the html code for Bootstrap's Carousel:

<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=" Include pictures 1 Article path ">
   <img src=" Picture 1 Path " alt=" Picture 1" onload="DrawImage(this)"/></a>
   <div class="carousel-caption">
    <h4 class="alpha">
     <a style="color:white;" href=" Include pictures 1 Article path "> Picture 1 Title </a>
    </h4>
    </div>
  
  </div>
  <div class="item">
  <a href=" Include pictures 2 Article path ">
   <img src=" Picture 2 Path " alt=" Picture 2" onload="DrawImage(this)"/>
  </a>
  <div class="carousel-caption">
    <h4 class="alpha">
     <a style="color:white;" href=" Include pictures 2 Article path "> Picture 2 Title </a>
    </h4>
    </div>
  </div>
  <div class="item">
   <a href=" Include pictures 3 Article path ">
    <img src=" Picture 3 Path " alt=" Picture 3" onload="DrawImage(this)"/>
   </a>
   <div class="carousel-caption">
    <h4 class="alpha">
     <a style="color:white;" href=" Include pictures 3 Article path "> Picture 3 Title </a>
    </h4>
    </div>
  </div>
 </div>

As you can see from the above code, Each picture (img) calls a function DrawImage when loading (onload). In this function, we can call jqthumb. js to control the size of the picture. Note that this function 1 must be added before the above HTML code, otherwise the control of the picture size will fail when loading for the first time (because of the page loading timing). The function code is as follows:

<!-- Import plug-ins -->
<script type="text/javascript" src="/static/plugins/thumb/js/jqthumb.js"></script>
<script>
function DrawImage(hotimg)
{
 $(hotimg).jqthumb({
 classname  : 'jqthumb',
   width   : '100%',
   height   : '300px',
   position  : { y: '50%', x: '50%'},
   zoom   : '1',
   method   : 'auto',
 });
}
</script>

In this function, we call the jqthumb method to define a thumbnail of the original picture with the same width as the carousel plug-in and the height of 300px. The thumbnail is generated from the center of the picture (pay attention to the setting of its position attribute), so that even if the size of the picture changes, the main content of the picture can be displayed, and the picture ratio can remain unchanged.

Source: Top Qiuwang

If you want to study in depth, you can click here to study, and then attach three wonderful topics for you:

Bootstrap Learning Tutorial

Bootstrap Practical Course

Tutorial on using Bootstrap plug-in