In the homepage of Dingqiu.com, I used the carousel plug-in of BootStrap to display the pictures in the article. I automatically grab the first image of the article in the program as the image to be displayed in the carousel control. Since the image sizes of the article vary, and the size of the carousel plug-in is basically fixed, the picture is deformed when displayed. I have found many Chinese methods online but have not solved them (the process is tortuous, so I won't repeat it). Until I found this Jquery scaling plug-in - jqthumb.js. Let's take a look at how to use it and how to use it to control the size of the picture in the carousel control, and it can be undeformed and can display the main parts of the picture (similar to the image mixing effect of WeChat Moments - I don't know if you have noticed that no matter what the ratio of the pictures you posted in WeChat Moments, it can always be perfectly arranged without deformation). First, let's take a look at the html code of Bootstrap's Carousel:
<div id="carousel-example-generic" data-ride="carousel"><!-- Wrapper for slides --> <div role="listbox"> <div> <a href="Included Picture One Article Path"> <img src="Image One Path" onload="DrawImage(this)"/></a> <div> <h4> <a style="color:white;" href="Included Picture One Article Path"> Picture One Title</a> </h4> </div> </div> <div> <a href="Included Picture Two Article Path"> <img src="Image Two Path" onload="DrawImage(this)"/> </a> <div> <h4> <a style="color:white;" href="Included Picture Two Article Path">Image Two Title</a> </h4> </div> </div> <div> <a href="Included Picture Three Article Path"> <img src="Included Picture Three Path" onload="DrawImage(this)"/> </a> <div> <h4> <a style="color:white;" href="Included Picture Three Article Path">Image Three Title</a> </h4> </div> </div> </div> </div> </div> </div> </div> </div>
From the above code, we can see that each image (img) calls a function DrawImage when 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 before the above HTML code. Otherwise, the control of the image size will fail when loading the first time (because of the page loading timing). The function code is as follows:
<!--Import plugin--><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 of 300px and the carousel plug-in. The thumbnail is generated from the center of the image (note the setting of its position attribute). This way, even if the size of the image changes, the main content of the image can be displayed, and the image ratio can remain unchanged.
Source: Dingqiu.com
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content. I hope it will be helpful to everyone and I hope everyone will support Wulin.com more.