Cuando diseñamos páginas web, siempre nos encontramos con algunas cosas desagradables. El más común es que después de agregar contenido en segundo plano, encontramos que la página que se muestra está abierta, lo que hace que la página web sea extremadamente desagradable. En el pasado, las personas básicamente diseñaron tablas, por lo que naturalmente hay muchas soluciones en línea. Ahora hay diseños estándar Div CSS, y rara vez ven los buenos métodos relacionados. Ahora Xiaoxiang Online resume los buenos métodos que se encuentran en la vida diaria para evitar que las tablas se extiendan y las compartan con usted.
1. Establezca el tamaño de la imagen directamente en la página web, por ejemplo, el código: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg width = 600 altura = 500 borde = 0>. Aunque esto puede limitar el tamaño de la imagen, debe modificar manualmente el tamaño de la imagen antes de cargar la imagen, de lo contrario la imagen cargada se deformará.
2. Use el siguiente código: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg onload = javaScript: if (this.width> 600} {this.resized = true; this.style.width = 600; }>
Este método se reducirá automáticamente al ancho especificado cuando llame a la imagen, lo que no hará que la imagen se deforme y no romperá la tabla. Sin embargo, la desventaja es que si la imagen es demasiado grande, durante el proceso de descarga de imágenes, es decir, durante el proceso de visualización de imágenes, primero se mostrará en el tamaño original de la imagen, que romperá la tabla, y la página será fea. En segundo lugar, cuando la imagen se muestra completamente, la imagen se encogerá automáticamente.
3. Podemos limitar el tamaño de la tabla para evitar que se estire, por ejemplo, agregue el código en <width de tabla = 600 border = 0 cellpadding = 0 cellPacing = 0> style = table-layout: fijo; word-wrap: break-word; break-break; break-layout: fijo; fijo; es arreglar el diseño de la tabla, lo que puede evitar que la mesa se estire. Word-Wrap: Break-Word; es controlar las rupturas de línea, es decir, para hacer cumplir los descansos de línea. Esto debe usarse cuando hay mucho contenido de texto. Aparece un contenido duplicado extraordinario y si las salidas de línea no se ejecutan, la tabla se estirará; y Break Word: Break-All; Puede resolver el problema de que el marco IE se extiende por inglés (líneas de texto no asiáticas), pero no forzará una envoltura de línea, y solo se muestra el contenido en el ancho de la tabla. En términos generales, solo use estilo = Table-Layout: Fixed; Word-Wrap: Break-Word; Por supuesto, las declaraciones llamadas anteriormente se pueden definir en CSS, por ejemplo
| mesa { Layout de tabla: fijo; Word-Wrap: Break-Word; } |
4. Use CSS para controlar el tamaño adaptativo de la imagen, el código es el siguiente:
| img { Máxido: 600px; ancho: expresión (this.width> 600? 600px: this.width); desbordamiento: oculto; } |
Entre ellos, Max-Width: 600px; En otros navegadores que no son IE como IE7 y Firefox, el ancho máximo es de 600 px, pero no es válido en IE6; Ancho: 600px; En todos los navegadores, el tamaño de la imagen es de 600 px. Cuando el tamaño de la imagen es mayor que 600px, se encoge automáticamente a 600px, que es válido en IE6; y desbordamiento: oculto; se refiere a ocultar la pieza más allá del tamaño del conjunto para evitar la deformación de la tabla debido a la falta de control del tamaño de la imagen. 2 páginas en el total de la página 12 Página siguiente