En la página de inicio de Dingqiu.com, utilicé el complemento Carousel de Bootstrap para mostrar las imágenes en el artículo. Alojo automáticamente la primera imagen del artículo en el programa como la imagen que se mostrará en el control del carrusel. Dado que los tamaños de imagen del artículo varían, y el tamaño del complemento de carrusel se fija básicamente, la imagen se deforma cuando se muestra. He encontrado muchos métodos chinos en línea, pero no los he resuelto (el proceso es tortuoso, por lo que no lo repetiré). Hasta que encontré este complemento de escala jQuery - jqthumb.js. Echemos un vistazo a cómo usarlo y cómo usarlo para controlar el tamaño de la imagen en el control del carrusel, y puede ser sin deformación y puede mostrar las partes principales de la imagen (similar al efecto de mezcla de imágenes de los momentos de WeChat, no sé si ha notado que no importa la relación de la relación de la relación que publicó en los momentos de Wechat, siempre se puede perfeccionar sin deformación). Primero, echemos un vistazo al código HTML del carrusel de Bootstrap:
<div id = "Carousel-Example-Generic" data-ride = "Carousel"> <!-Wrapper para diapositivas-> <div role = "ListBox"> <div> <a href = "incluyó una ruta de artículo"> <img src = "imagen una ruta" onload = "drawImage (this)"/> </a> <hiv> <h4> <h syle = "color: white;"; " href = "incluido la ruta de la imagen un artículo"> Imagen un título </a> </h4> </div> </div> <div> <a href = "imagen de la imagen de dos artículos" href = "incluido la imagen dos del artículo"> Imagen dos títulos </a> </h4> </div> </div> <div> <a href = "INCLUIDA INCLUIDA Tres Ruta del artículo"> <img src = "INCLUADA TRES PATH" OnLOAD = "DrawImage (this)"/> </a> <div> <h4> <Ayle = "Color: White" href = "INCLUIDA PROGACIÓN TRES PATA DEL ARTÍCULO"> Imagen tres Título </a> </h4> </div> </div> </div> </div> </div> </div> </div> </div>
Desde el código anterior, podemos ver que cada imagen (IMG) llama a una función DrawImage al cargar (Onload). En esta función, podemos llamar al método jqthumb.js para controlar el tamaño de la imagen. Tenga en cuenta que la función debe agregarse antes del código HTML anterior. De lo contrario, el control del tamaño de la imagen fallará al cargar la primera vez (debido al tiempo de carga de la página). El código de función es el siguiente:
< X: '50%'}, Zoom:' 1 ', Método:' Auto ',});} </script>
En esta función, llamamos al método JQThumb para definir una miniatura de la imagen original con un ancho de 300px y el complemento de carrusel. La miniatura se genera desde el centro de la imagen (tenga en cuenta la configuración de su atributo de posición). De esta manera, incluso si cambia el tamaño de la imagen, se puede mostrar el contenido principal de la imagen y la relación de imagen puede permanecer sin cambios.
Fuente: Dingqiu.com
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido. Espero que sea útil para todos y espero que todos apoyen más a Wulin.com.