Na página inicial do dingqiu.com, usei o plug-in carousel de bootstrap para exibir as imagens no artigo. Peguei automaticamente a primeira imagem do artigo no programa como a imagem a ser exibida no controle do carrossel. Como os tamanhos da imagem do artigo variam e o tamanho do plug-in do carrossel é basicamente fixo, a imagem é deformada quando exibida. Eu encontrei muitos métodos chineses on -line, mas não os resolvi (o processo é tortuoso, então não vou repeti -lo). Até eu encontrar este plug -in de escala jQuery - jqthumb.js. Vamos dar uma olhada em como usá -lo e como usá -lo para controlar o tamanho da imagem no controle do carrossel, e ela pode ser deformada e pode exibir as partes principais da imagem (semelhante ao efeito de mistura de imagens dos momentos de WeChat - eu não sei se você sempre notou que, não importa o que seja a razão da proporção de figuras que você publicou nos momentos do WECHAT. Primeiro, vamos dar uma olhada no código HTML do carrossel de Bootstrap:
<div id = "Carousel-Exemplo-Genérico" Data-ride = "Carousel"> <!-Wrapper para slides-> <div role = "ListBox"> <div> <a href = "Incluído One Artigo Path"> <img src = "imagem um caminho" Onload = "DrawImage (this)"/> </a> href = "Incluído Picture One Arty Path"> Picture Um título </a> </h4> </div> </div> <div> <a href = "incluiu o caminho do artigo da imagem dois"> <img src = "imagem dois caminho" Onload = "drawImage (this)"/> </a> <div> <h4> <aily = "cor: coro:" href = "Incluído Picture Dois Artigo Caminho"> Imagem Dois títulos </a> </h4> </div> </div> <div> <a href = "incluiu o caminho do artigo da imagem três"> <img src = "incluiu a imagem três" Onload = "drawImage (this)"/> </a> <div> <h4> <a estilo = "cor": href = "Incluído Figura Três Artigo Caminho"> Imagem Três Título </a>
A partir do código acima, podemos ver que cada imagem (IMG) chama uma função DrawImage ao carregar (Onload). Nesta função, podemos chamar o método jqthumb.js para controlar o tamanho da imagem. Observe que a função deve ser adicionada antes do código HTML acima. Caso contrário, o controle do tamanho da imagem falhará ao carregar a primeira vez (devido ao tempo de carregamento da página). O código da função é o seguinte:
<!-Importar plugin-> <script type = "text/javascript" src = "/static/plugins/thumb/js/jqthumb.js"> </script> <cript> função drawImage (HOTIMG) {$ (HOTIMG) .JQTHUMB ({ClassName: 'JQThumb. '50%', x: '50%'}, zoom: '1', método: 'auto',});} </sCript>Nesta função, chamamos o método JQTHumb para definir uma miniatura da imagem original com uma largura de 300px e o plug-in do carrossel. A miniatura é gerada a partir do centro da imagem (observe a configuração de seu atributo de posição). Dessa forma, mesmo que o tamanho da imagem mude, o conteúdo principal da imagem pode ser exibido e a proporção da imagem pode permanecer inalterada.
Fonte: dingqiu.com
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O acima é todo o conteúdo. Espero que seja útil para todos e espero que todos apoiem mais o Wulin.com.