Nós (especialmente novatos como eu) frequentemente encontramos um problema - a adaptação de imagens. Este problema é muito comum. Na área de artigos e no fórum, pode-se dizer que sempre que é necessário enviar fotos, esse problema existe e as pessoas perguntam sobre isso de vez em quando no fórum. Por que? A razão é simples: não podemos exigir que os editores da web ou os membros do seu fórum sejam capazes de cortar imagens ou entender o código HTML mais básico - embora este não tenha muito conteúdo técnico.
A solução anterior foi implementada principalmente em js, mas quem já a usou sabe que esse método é um pouco complicado. Outra forma é definir over-flow:hidden em um contêiner externo. Mas este método apenas cortará a imagem e não será aplicado automaticamente.
O surgimento do método a seguir deve ser graças ao excelente CSS2.0 e à ainda maior Microsoft (sem ele, não haveria necessidade de um código tão detalhado ^_^). Passei no teste apenas em ie6.0, ff1.5, opera7.0 no winXP. Espero que este artigo possa inspirar outras pessoas e que mais especialistas possam dar orientação. A chave é: max-width:780px e a linha abaixo.
Adaptação de pixel fixa:
Execute a caixa de código
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//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; /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { font-size: 12px; text-align: center: 0px; pic{margem:0 auto;largura:800px;borda:1px sólido #333; width:expression(document.body.clientWidth > 780? 780px: auto ); border:1px tracejado #000; --> </style> </head> <body> <div id=pic> <img src=http ://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Obrigado ao blueidea pela imagem com hotlink! /> </div> </body> </html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
Adaptação percentual:
Execute a caixa de código
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//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; /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { font-size: 12px; text-align: center; pic{ margem:0 largura automática:90%; borda:1px sólido #333; width:expression(document.body.clientWidth>document.getElementById(pic).scrollWidth*8/10? 80%: auto ); > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Obrigado blueidea pela imagem com hotlink! /> </div> </body> </html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
lembrar:
1 Este método não é apenas para img;
2 largura máxima, altura máxima, largura mínima, altura mínima.
Introdução ao uso de expressão em CSSAutor: dozb
definição
O IE5 e versões posteriores suportam o uso de expressão em CSS para associar propriedades CSS a expressões Javascript. As propriedades CSS aqui podem ser propriedades inerentes do elemento ou propriedades personalizadas. Ou seja, o atributo CSS pode ser seguido por uma expressão Javascript, e o valor do atributo CSS é igual ao resultado do cálculo da expressão Javascript. Você pode fazer referência direta às propriedades e aos métodos do próprio elemento na expressão ou pode usar outros objetos do navegador. A expressão é como se estivesse dentro de uma função membro deste elemento.
Atribuir valores às propriedades intrínsecas dos elementos
Por exemplo, você pode posicionar um elemento com base no tamanho do navegador.
#minhaDiv {
posição: absoluta;
largura: 100px;
altura: 100px;
esquerda: expressão(document.body.offsetWidth - 110 + px);
topo: expressão(document.body.offsetHeight - 110 + px);
fundo: vermelho;
}
Atribuir valores aos atributos personalizados do elemento
Por exemplo, elimine caixas pontilhadas para links na página.
A abordagem usual é:
<a href=link1.htm onfocus=this.blur()>link1</a>
<a href=link2.htm onfocus=this.blur()>link2</a>
<a href=link3.htm onfocus=this.blur()>link3</a>
À primeira vista, as vantagens de usar expressão podem não ser aparentes, mas se houver dezenas ou mesmo centenas de links em sua página, você ainda usará Ctrl+C e Ctrl+V mecanicamente neste momento, quanto mais ambos em comparação? , qual deles gera código mais redundante?
A maneira de usar a expressão é a seguinte:
<tipo de estilo=texto/css>
a {estrela: expressão(onfocus=this.blur)}
</estilo>
<a href=link1.htm>link1</a>
<a href=link2.htm>link2</a>
<a href=link3.htm>link3</a>
ilustrar:
A estrela dentro é um atributo definido por você mesmo. Você pode defini-lo como quiser. Então a instrução contida em expression() é um script JS. Ainda é CSS, então é colocado na tag de estilo, não no script. OK, é fácil eliminar a caixa pontilhada do link na página em uma frase. Mas não seja complacente. Se o efeito especial acionado for uma alteração de atributo CSS, o resultado será diferente da sua intenção original. Por exemplo, se você quiser alterar a cor da caixa de texto na página conforme o mouse se move para dentro e para fora, você pode naturalmente pensar que ela deveria ser escrita como
/* O texto original está distorcido, não tenho tempo para corrigi-lo, desculpe!*/
Mas o resultado é um erro de script. A maneira correta de escrever isso é escrever a definição do estilo CSS na função, conforme mostrado abaixo:
<tipo de estilo=texto/css>
entrada {estrela: expressão(onmouseover=function()
{this.style.backgroundColor=#FF0000},
onmouseout=function(){this.style.backgroundColor=#FFFFFF}) }
</estilo>
<tipo de entrada=texto>
<tipo de entrada=texto>
<tipo de entrada=texto>
Perceber:
Geralmente não é recomendado usar expressão porque a expressão requer recursos relativamente altos do navegador.