Nosotros (especialmente los novatos como yo) a menudo nos encontramos con un problema: la adaptación de imágenes. Este problema es muy común. En el área de artículos y en el foro, se puede decir que dondequiera que sea necesario cargar imágenes, existe este problema y la gente pregunta sobre ello de vez en cuando en el foro. ¿Por qué? La razón es simple: no podemos exigir que los editores web o los miembros de su foro puedan recortar imágenes o comprender el código HTML más básico, aunque esto no tiene mucho contenido técnico.
La solución anterior se implementó principalmente usando js, pero cualquiera que la haya usado sabe que este método es un poco engorroso. Otra forma es definir over-flow:hidden en un contenedor externo. Pero este método sólo cortará la imagen y no se aplicará automáticamente.
La aparición del siguiente método debería deberse al gran CSS2.0 y al aún mejor Microsoft (sin él, no habría necesidad de tener un código tan detallado ^_^). Solo pasé la prueba en ie6.0, ff1.5, opera7.0 en winXP. Espero que este artículo pueda inspirar a otros y que más expertos puedan brindar orientación. La clave es: max-width:780px; y la línea de abajo.
Adaptación de píxeles fijos:
Ejecutar cuadro de código
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transicional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html charset=gb2312; /> <title>css2.0 VS, es decir</title> <style type=text/css> <!-- body { font-size: 12px; text-align: center; padding: 0px; imagen{ margen:0 auto; ancho:800px; relleno:0; borde:1px sólido #333; ancho: expresión (document.body.clientWidth > 780? 780px: auto); borde: 1px discontinuo #000; //www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=¡Gracias a blueidea por la imagen vinculada! /> </div> </body> </html>
[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]
Adaptación porcentual:
Ejecutar cuadro de código
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transicional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html charset=gb2312; /> <title>css2.0 VS, es decir</title> <style type=text/css> <!-- body { font-size: 12px; text-align: center; padding: 0; imagen{ margen:0 auto; ancho:90%; relleno:0; borde:1px sólido #333; ancho:expresión(document.body.clientWidth>document.getElementById(pic).scrollWidth*8/10? 80%: auto ); borde:1px discontinuo #000; > <div id=imagen> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=¡Gracias blueidea por la imagen vinculada! /> </div> </body> </html>
[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]
recordar:
1 Este método no es sólo para img;
2 ancho máximo, alto máximo, ancho mínimo, alto mínimo.
Introducción al uso de expresiones en CSS.Autor: dozb
definición
IE5 y versiones posteriores admiten el uso de expresiones en CSS para asociar propiedades CSS con expresiones Javascript. Las propiedades CSS aquí pueden ser propiedades inherentes del elemento o propiedades personalizadas. Es decir, el atributo CSS puede ir seguido de una expresión Javascript y el valor del atributo CSS es igual al resultado del cálculo de la expresión Javascript. Puede hacer referencia directamente a las propiedades y métodos del propio elemento en la expresión, o puede utilizar otros objetos del navegador. La expresión es como si estuviera dentro de una función miembro de este elemento.
Asignar valores a propiedades intrínsecas de los elementos.
Por ejemplo, puede colocar un elemento según el tamaño del navegador.
#miDiv {
posición: absoluta;
ancho: 100px;
altura: 100 píxeles;
izquierda: expresión(document.body.offsetWidth - 110 + px);
arriba: expresión (document.body.offsetHeight - 110 + px);
fondo: rojo;
}
Asignar valores a atributos personalizados de elementos
Por ejemplo, elimine los cuadros de puntos de los enlaces de la página.
El enfoque habitual es:
<a href=enlace1.htm onfocus=this.blur()>enlace1</a>
<a href=enlace2.htm onfocus=this.blur()>enlace2</a>
<a href=link3.htm onfocus=this.blur()>enlace3</a>
A primera vista, las ventajas de usar expresiones pueden no ser evidentes, pero si hay docenas o incluso cientos de enlaces en su página, ¿seguirá usando Ctrl+C y Ctrl+V mecánicamente en este momento, y mucho menos ambos? , ¿cuál genera más código redundante?
La forma de utilizar la expresión es la siguiente:
<tipo de estilo=texto/css>
una {estrella: expresión(onfocus=this.blur)}
</estilo>
<a href=enlace1.htm>enlace1</a>
<a href=enlace2.htm>enlace2</a>
<a href=link3.htm>enlace3</a>
ilustrar:
La estrella interna es un atributo definido por usted mismo. Puede definirlo como desee. Luego, la declaración contenida en expresión () es un script JS. No olvide que hay una comilla entre el atributo personalizado y la expresión. Sigue siendo CSS, por lo que se coloca en la etiqueta de estilo, no en el script. Bien, es fácil eliminar el cuadro de puntos del enlace en la página en una oración. Pero no seas complaciente si el efecto especial activado es un cambio de atributo CSS, el resultado será diferente de tu intención original. Por ejemplo, si desea cambiar el color del cuadro de texto en la página a medida que el mouse entra y sale, naturalmente puede pensar que debería escribirse como
/* El texto original está confuso, no tengo tiempo para corregirlo, ¡lo siento!*/
Pero el resultado es un error de script. La forma correcta de escribirlo es escribir la definición del estilo CSS en la función, como se muestra a continuación:
<tipo de estilo=texto/css>
entrada {estrella: expresión(onmouseover=función()
{this.style.backgroundColor=#FF0000},
onmouseout=función(){this.style.backgroundColor=#FFFFFF}) }
</estilo>
<tipo de entrada=texto>
<tipo de entrada=texto>
<tipo de entrada=texto>
Aviso:
No es muy necesario. Generalmente no se recomienda utilizar expresiones porque las expresiones requieren recursos del navegador relativamente elevados.