The ultimate solution of image distortion in bootstrap carousel using Jqthumb.js_javascript tips

In the top of the Web page I used the bootstrap Carousel (Carousel) plug-in to show the pictures in the article. I in the program automatically grab the first picture of the article as the Carousel control to display the picture, because the picture size of the article is different, and the size of the carousel is basically fixed, so show the time the picture appears distorted. Found in the Internet a lot of ways also did not solve (the process twists and turns, no longer repeat), until the jquery to find the Zoom plugin- Jqthumb.js. Here's how to use it and how to use it to control the size of a picture in a carousel control, and to be able to do it without distortion, you can display the main part of the picture (similar to the image blending effect of the micro-trust circle)--I don't know if you noticed, No matter what the ratio of pictures you send in a micro-trust circle, you can always be perfectly arranged without distortion. First, let's look at Bootstrap's Carousel HTML code:  

<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= "contains picture one article path" > <i MG src= "Picture One path" alt= "Picture One" onload= "DrawImage (This)"/></a> <div class= "carousel-caption" > 
 
 
 

As you can see from the code above, each image (IMG) calls a function drawimage when it is loaded (onload). In this function we can call the Jqthumb.js method to control the size of the picture, note that the function must be added to the above HTML code, otherwise the first load to control the size of the picture will fail (because of the reason for page load timing), the function code is as follows:

<!--import plug-in-->
<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 height of 300px as the width and the carousel. The thumbnail is generated by the center of the picture (note the setting of its position property) so that the main contents of the picture can be displayed even if the size of the picture changes , and the picture ratio can remain unchanged.

Source: Top-seeking Network

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is all content, hope to be helpful to everybody, also hope everybody supports cloud habitat community more.