Quando projetamos páginas da web, sempre encontramos algumas coisas desagradáveis. O mais comum é que, depois de adicionar conteúdo em segundo plano, descobrimos que a página exibida está aberta, o que torna a página da web extremamente feia. No passado, as pessoas basicamente projetam tabelas, então existem muitas soluções online. Agora existem projetos padrão do Div CSS e eles raramente vêem bons métodos relacionados. Agora, a Xiaoxiang on -line resume os bons métodos encontrados na vida cotidiana para impedir que as tabelas sejam espalhadas e compartilhe -as com você.
1. Defina o tamanho da imagem diretamente na página da web, por exemplo, o código: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg width = 600 altura = 500 borda = 0>. Embora isso possa limitar o tamanho da imagem, você precisa modificar manualmente o tamanho da imagem antes de fazer o upload da imagem, caso contrário, a imagem carregada se deformará.
2. Use o seguinte código: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg onload = javascript: if (this.width> 600} {this.Resized = true; this.style.width = 600;} {
Esse método diminuirá automaticamente para a largura especificada ao chamar a imagem, que não fará com que a imagem seja deformada e não quebrará a tabela. No entanto, a desvantagem é que, se a imagem for muito grande, durante o processo de download da imagem, ou seja, durante o processo de exibição da imagem, ele será exibido primeiro no tamanho original da imagem, que quebrará a tabela, e a página será feia. Segundo, quando a imagem é totalmente exibida, a imagem será reduzida automaticamente.
3. Podemos limitar o tamanho da tabela para impedir que ela seja esticada, por exemplo, adicione o código em <tabela largura = 600 borda = 0 CellPadding = 0 Cellpacing = 0> style = tabela-layout: corrigido; word-wrap: word-word; break-break; é consertar o layout da tabela, que pode efetivamente impedir que a tabela seja esticada. Word-wrap: Break-Word; é controlar quebras de linha, isto é, para aplicar quebras de linha. Isso precisa ser usado quando há muito conteúdo de texto. O conteúdo duplicado extraordinário aparece e, se as quebras de linha não forem executadas, a tabela será esticada; e Break Word: Break-All; Ele pode resolver o problema de que a estrutura do IE está espalhada por inglês (linhas de texto não asiáticas), mas não forçará um envoltório de linha e apenas o conteúdo da largura da tabela é exibido. De um modo geral, basta usar o estilo = layout da tabela: fixo; embrulhar palavras: palavra de break; Obviamente, as declarações chamadas acima podem ser definidas no CSS, por exemplo
| mesa { Layout da tabela: corrigido; Word-wrap: Break-Word; } |
4. Use CSS para controlar o tamanho adaptativo da imagem, o código é o seguinte:
| img { MAX-LUDA: 600PX; Largura: expressão (this.width> 600? 600px: this.width); estouro: oculto; } |
Entre eles, largura máxima: 600px; Em outros navegadores que não são da AE, como o IE7 e o Firefox, a largura máxima é de 600px, mas é inválida no IE6; Largura: 600px; Em todos os navegadores, o tamanho da imagem é de 600px. Quando o tamanho da imagem é maior que 600px, ele diminui automaticamente para 600px, o que é válido no IE6; e transbordamento: oculto; Refere -se a ocultar a peça além do tamanho do conjunto para evitar a deformação da tabela devido à falha no controle do tamanho da imagem. 2 páginas no total Página anterior 12 Próxima página