Dans la page d'accueil de dingqiu.com, j'ai utilisé le plug-in carrousel de bootstrap pour afficher les images de l'article. Je sais automatiquement la première image de l'article dans le programme comme l'image à afficher dans le contrôle du carrousel. Étant donné que les tailles d'image de l'article varient et que la taille du plug-in de carrousel est essentiellement fixe, l'image est déformée lorsqu'elle est affichée. J'ai trouvé de nombreuses méthodes chinoises en ligne mais je ne les ai pas résolues (le processus est tortueux, donc je ne le répéterai pas). Jusqu'à ce que je trouve ce plug-in de mise à l'échelle jQuery - jqthumb.js. Voyons comment l'utiliser et comment l'utiliser pour contrôler la taille de l'image dans le contrôle du carrousel, et il peut être non déformé et peut afficher les principales parties de l'image (similaire à l'effet de mélange d'image des moments de WeChat - je ne sais pas si vous avez toujours remarqué que peu importe le rapport des images que vous avez publiées dans les moments de WECHAT, il peut toujours être parfaitement organisé sans déformation). Tout d'abord, jetons un coup d'œil au code HTML du carrousel de bootstrap:
<div id = "Carousel-Example-Generic" Data-ride = "Carousel"> <! - Wrapper pour les diapositives -> <div role = "listbox"> <div> <a href = "inclus Image One Article Path"> <img src = "Image One Path" Onload = "Drawimage (this)" /> </a> <div> <h4> <a style = "Color: White;" href = "INCLUS IMAGE ONE Article Path"> Image One Title </a> </h4> </div> </div> <div> <a href = "INCLUS INCLUS Two Article Path"> <img src = "Image Two Path" onload = "Drawimage (this)" /> </a> <div> <h4> <a style = "Color: White;" href = "INCLUS PATH TWO Two Article"> Image Deux titre </a> </h4> </div> </div> <div> <a href = "INCLUS INCLUS TROIS PATH ARTICLE"> <img src = "INCLUS PATURE TROIS" ONLOAD = "Drawimage (this)" /> </a> <div> <h4> <a style = "Color: White;" href = "INCLUS PATH TROIS TROIS ARTICLE"> Image trois titre </a> </h4> </div> </div> </div> </div> </div> </div> </div> </div>
À partir du code ci-dessus, nous pouvons voir que chaque image (IMG) appelle une fonction DrawImage lors du chargement (onload). Dans cette fonction, nous pouvons appeler la méthode jqthumb.js pour contrôler la taille de l'image. Notez que la fonction doit être ajoutée avant le code HTML ci-dessus. Sinon, le contrôle de la taille de l'image échouera lors du chargement de la première fois (en raison du calendrier de chargement de la page). Le code de fonction est le suivant:
<! - Importer le plugin -> <script type = "text / javascript" src = "/ static / plugins / thumb / js / jqthumb.js"> </ script> <script> function drawimage (hotImg) {$ (hotImg) .jqTHumb ({classname: 'jqthumb', '50% ', height:' 300px ', position: '50%', height: '300px', position: {y: 50% ', height:' 300px ', position: y: '50%', height: '300px', position: {y: 50% ', Hight:' 300px ', position: {y: 50%', Hight: '300px', position: {y: 50% ', HEIGH x: '50% '}, zoom:' 1 ', méthode:' auto ',});} </script>Dans cette fonction, nous appelons la méthode JQTHumb pour définir une vignette de l'image d'origine avec une largeur de 300px et le plug-in Carrousel. La vignette est générée à partir du centre de l'image (notez le réglage de son attribut de position). De cette façon, même si la taille de l'image change, le contenu principal de l'image peut être affiché et le rapport d'image peut rester inchangé.
Source: dingqiu.com
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu. J'espère que cela sera utile à tout le monde et j'espère que tout le monde soutiendra davantage Wulin.com.