Solution adaptative aux images sous div

Auteur：Eve Cole Date de mise à jour：2025-01-17 10:12:01

Nous (surtout les novices comme moi) rencontrons souvent un problème : l'adaptation des images. Ce problème est très courant. Dans la zone des articles et des forums, on peut dire que partout où des images doivent être téléchargées, ce problème existe et les gens le posent de temps en temps sur les forums. Pourquoi? La raison est simple : nous ne pouvons pas exiger des éditeurs Web ou des membres de votre forum qu'ils soient capables de recadrer des images ou de comprendre le code HTML le plus élémentaire - même si cela n'a pas beaucoup de contenu technique.

La solution précédente était principalement implémentée à l'aide de js, mais tous ceux qui l'ont utilisée savent que cette méthode est un peu lourde. Une autre façon consiste à définir over-flow:hidden dans un conteneur externe. Mais cette méthode ne fera que couper l’image et ne sera pas appliquée automatiquement.

L'émergence de la méthode suivante devrait être due au grand CSS2.0 et au plus grand Microsoft (sans lui, il n'y aurait pas besoin d'un code aussi verbeux ^_^). J'ai seulement réussi le test sur ie6.0, ff1.5, opera7.0 sous winXP. J'espère utiliser cet article pour inspirer les autres et j'espère que davantage d'experts pourront donner des conseils. La clé est : max-width:780px et la ligne ci-dessous.

Adaptation des pixels fixes :

Boîte de code d'exécution

<!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> <méta http-equiv=Content-Type content=text/html charset=gb2312; /> <title>css2.0 VS ie</title> <style type=text/css>  </style> </head> <body> <div id=pic> <img src=http https://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Merci à blueidea pour les photos en lien direct ! /> </div> </body> </html>

[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Adaptation en pourcentage :

Boîte de code d'exécution

<!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> <méta http-equiv=Content-Type content=text/html charset=gb2312; /> <title>css2.0 VS ie</title> <style type=text/css>  </style> </head> <body > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Merci blueidea pour la photo liée au lien hypertexte ! /> </div> </body> </html>

[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

rappeler:

1 Cette méthode n'est pas réservée uniquement à img ;

2 largeur maximale, hauteur maximale, largeur minimale, hauteur minimale.

Introduction à l'utilisation des expressions en CSS

Auteur : dozb

définition

IE5 et les versions ultérieures prennent en charge l'utilisation d'expressions en CSS pour associer des propriétés CSS à des expressions Javascript. Les propriétés CSS peuvent ici être des propriétés inhérentes à l'élément ou des propriétés personnalisées. C'est-à-dire que l'attribut CSS peut être suivi d'une expression Javascript et que la valeur de l'attribut CSS est égale au résultat du calcul de l'expression Javascript. Vous pouvez référencer directement les propriétés et les méthodes de l'élément lui-même dans l'expression ou utiliser d'autres objets du navigateur. L'expression est comme si elle se trouvait dans une fonction membre de cet élément.

Attribuer des valeurs aux attributs intrinsèques des éléments

Par exemple, vous pouvez positionner un élément en fonction de la taille du navigateur.

#maDiv {

position : absolue ;

largeur : 100 px ;

hauteur : 100px ;

gauche : expression(document.body.offsetWidth - 110 + px);

haut : expression (document.body.offsetHeight - 110 + px);

fond : rouge ;

}

Attribuer des valeurs aux attributs personnalisés des éléments

Par exemple, éliminez les cases en pointillés pour les liens sur la page.

L'approche habituelle est la suivante :

À première vue, les avantages de l'utilisation de l'expression ne sont peut-être pas évidents, mais s'il y a des dizaines, voire des centaines de liens sur votre page, utiliseriez-vous toujours Ctrl+C et Ctrl+V mécaniquement, sans parler des deux. En comparaison, lequel ? génère plus de code redondant ?

La façon d’utiliser l’expression est la suivante :

une {étoile : expression(onfocus=this.blur)}

</style>

illustrer:

L'étoile à l'intérieur est un attribut défini par vous-même. Vous pouvez le définir comme vous le souhaitez. Ensuite, l'instruction contenue dans expression() est un script JS. N'oubliez pas de mettre des guillemets entre l'attribut personnalisé et l'expression, car en substance. C'est toujours du CSS, donc il est placé dans la balise de style, pas dans le script. OK, il est donc facile d’éliminer la zone en pointillé du lien dans la page en une seule phrase. Mais ne soyez pas complaisant. Si l’effet spécial déclenché est un changement d’attribut CSS, le résultat sera différent de votre intention initiale. Par exemple, si vous souhaitez changer la couleur de la zone de texte sur la page lorsque la souris entre et sort, vous pouvez naturellement penser qu'elle doit être écrite comme suit :

/* Le texte original est tronqué, je n’ai pas le temps de le corriger, désolé !*/

Mais le résultat est une erreur de script. La bonne façon de l'écrire est d'écrire la définition du style CSS dans la fonction, comme indiqué ci-dessous :

entrée {étoile : expression(onmouseover=function()

{this.style.backgroundColor=#FF0000},

onmouseout=function(){this.style.backgroundColor=#FFFFFF}) }

</style>

Avis:

Ce n'est pas vraiment nécessaire. Il n'est généralement pas recommandé d'utiliser une expression car celle-ci nécessite des ressources de navigateur relativement élevées.