css | standard | solve | webpage | adaptive We (especially novices like me) often encounter a problem-picture adaptation. This problem is very common. In the article area, in the forum, you can say: Where there is a need to upload pictures, this problem exists, and from time to time people are asked on the forum. why? The reason is simple, we cannot ask web page editors or your forum members to crop images or understand the most basic html code-although this is not very technical.
The previous solution was mainly implemented using js, but everyone who has used it knows that this method is a bit tedious. Another is to define over-flow: hidden in the external container. But this method will only cut the picture and will not apply automatically.
The following approach should appear thanks to the great css2.0 and the greater microsoft (without it there would be no such shy code ^ _ ^). I only passed the test under winXP in ie6.0, ff1.5, opera7.0. I hope to use this article to introduce others and hope for more expert advice. The key is: max-width: 780px; and the line below.
Fixed pixel adaptation:
<! 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; charset = gb2312" />
<title> css2.0 VS ie </ title>
<style type = "text / css">
<!-
body {font-size: 12px; text-align: center; margin: 0px; padding: 0px;}
#pic {margin: 0 auto; width: 800px; padding: 0; border: 1px solid # 333;}
#pic img {max-width: 780px; width: expression (document.body.clientWidth> 780? "780px": "auto"); border: 1px dashed # 000;}
->
</ style>
</ head>
<body>
<div id = "pic">
<img src = "http://www.webjx.com/articleimg/2006/03/3297/koreaad_10020.jpg" alt = "Thank blueidea for stealing pictures from me!" /> </ div>
</ body>
</ html>
Percent adaptation:
<! 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; charset = gb2312" />
<title> css2.0 VS ie </ title>
<style type = "text / css">
<!-
body {font-size: 12px; text-align: center; margin: 0; padding: 0;}
#pic {margin: 0 auto; width: 90%; padding: 0; border: 1px solid # 333;}
#pic img {max-width: 80%; width: expression (document.body.clientWidth> document.getElementById ("pic"). scrollWidth * 8/10? "80%": "auto"); border: 1px dashed # 000;}
->
</ style>
</ head>
<body>
<div id = "pic"> <img src = "http://www.webjx.com/articleimg/2006/03/3297/koreaad_10020.jpg" alt = "Thank blueidea for stealing pictures from me!" /> < / div>
</ body>
</ html>
remind:
1 This method is not only used for img;
2 max-width, max-height, min-width, min-height.
Introduction to the use of expression in CSS
Author: dozb
definition
IE5 and later versions support the use of expressions in CSS to associate CSS properties with Javascript expressions. The CSS properties here can be element-specific properties or custom properties. That is to say, the CSS property can be followed by a Javascript expression, and the value of the CSS property is equal to the result of the Javascript expression calculation. You can directly refer to the properties and methods of the element itself in the expression, or you can use other browser objects. The expression is as if it were in a member function of this element.
Assign values to element intrinsic properties
For example, you can position an element according to the size of the browser.
#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression (document.body.offsetWidth-110 + "px");
top: expression (document.body.offsetHeight-110 + "px");
background: red;
}
Assign values to element custom attributes
For example, eliminate the dashed links on the page.
The usual approach is:
<a href="link1.htm"> link1 </a>
<a href="link2.htm"> link2 </a>
<a href="link3.htm"> link3 </a>
At first glance, it may not show the advantages of using expressions, but if you have dozens or even hundreds of links on your page, at this time, would you still mechanically Ctrl + C, Ctrl + V, let alone one of them? By comparison, which one produces more redundant code?
The way to use expression is as follows:
<style type = "text / css">
a {star: expression (onfocus = this.blur)}
</ style>
<a href="link1.htm"> link1 </a>
<a href="link2.htm"> link2 </a>
<a href="link3.htm"> link3 </a>
Explanation:
The star in it is an attribute that you define arbitrarily. You can define it according to your preference. The statement contained in expression () is a JS script. Do n’t forget to include a quote between the custom attribute and expression, because the essence is It's still CSS, so it's inside a style tag, not a script. OK, so it is easy to eliminate the dashed link box in the page in one sentence. But don't be proud of it. If the trigger effect is a CSS property change, the result will be different from your original intention. For example, if you want to change the color of the text box in the page as the mouse moves in and out, you may take it for granted that it should be written as
/ * The original text is garbled and there is no time to correct it, sorry! * /
But the result is a script error. The correct way of writing should be to define the CSS style into the function, as shown below:
<style type = "text / css">
input (star: expression (onmouseover = function ()
{this.style.backgroundColor = "# FF0000"},
onmouseout = function () {this.style.backgroundColor = "# FFFFFF"})}
</ style>
<input type = "text">
<input type = "text">
<input type = "text">
note:
It is not very necessary, and expression is generally not recommended, because expression requires higher browser resources.
