The ultimate solution for image distortion in the bootstrap Carousel (Carousel) plugin-using jqthumb.js

I used the bootstrap carousel (carousel) plugin to display the pictures in the article on the top of the homepage. I in the program automatically grabbed the first picture of the article as the Carousel control to display the picture, because the article size of the picture, and the size of the carousel is basically fixed, so when the picture appears distorted. In the online find a lot of ways also did not solve (process twists and turns, no longer repeat), until found this jquery zoom plugin- Jqthumb.js. below to see how it can be used and how to use it to control the size of the picture in the carousel control, and to be able to do not deform, you can display the main part of the picture (similar to the picture of the circle of Friends of the image mix effect-do not know whether you have noticed, in the circle of friends regardless of the ratio of the 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 an article path" >
</a>
<div class= "Carousel-caption" >

<a style= "color:white;" href= "contains a picture of an article path" > Picture title </a>
</div>

</div>
<div class= "Item" >
<a href= "contains picture two article path" >

</a>
<div class= "Carousel-caption" >

<a style= "color:white;" href= "contains picture two article path" > picture two title </a>
</div>
</div>
<div class= "Item" >
<a href= "contains picture three article path" >

</a>
<div class= "Carousel-caption" >

<a style= "color:white;" href= "contains picture three article path" > picture three title </a>
</div>
</div>
</div>

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

<!--Import Plugins--
<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 image with a width and a carousel height of 300px, which is generated from the center of the image (note the setting of its position property) so that the image's main contents can be displayed even if the size of the picture changes. , and the picture ratio can remain the same.

Above is all the content, hope to be helpful to everyone, reproduced please indicate the source for the top of the network

The ultimate solution for picture warping in the bootstrap Carousel (Carousel) Plugin-using jqthumb.js