We (especially the rookie like me) often encounter a problem--the picture is adaptive. This problem is very common. In the article area, in the forum, you can say: where the need to upload pictures, where there is this problem, and the forum is also sometimes asked. Why? The reason is simple: we can't ask web editors or your forum members to crop up pictures or get to know the most basic HTML code-though there's not much technical content.
The previous solution is mainly to use JS to achieve, but the use of people know that the method is a bit cumbersome. Another is to define Over-flow:hidden in an external container. But this method only cuts the picture and does not apply automatically.
The advent of the following approach should be thanks to the great css2.0 and the greater Microsoft (without which there is no need to have such verbose code ^_^). I only in ie6.0,ff1.5,opera7.0 in WinXP under the test through, hope that through this article, looking for more expert advice. The key is: max-width:780px; and the following line.
Fixed pixel adaptation:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><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></pead><body><div id= "pic" ></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Percent fit:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><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></pead><body><div id= "pic" ></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Remind:
1 The method is not only used for IMG;
2 max-width,max-height,min-width,min-height.
Introduction to expression usage in CSS
Author: dozb
Defined
IE5 and its later versions support the use of expression in CSS to associate CSS properties with JavaScript expressions, where CSS attributes can be intrinsic or custom attributes of an element. This means that the CSS attribute can be followed by a JavaScript expression, and the value of the CSS property equals the result of the JavaScript expression calculation. You can refer directly to the properties and methods of an element itself in an expression, or you can use a different browser object. The expression is as if it were in a member function of this element.
Assigning values to intrinsic attributes of an element
For example, you can place the position of 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;
}
Assigning values to element custom attributes
For example, eliminate the link dashed box on the page.
The usual practice is to:
<a href= "link1.htm" >link1</a>
<a href= "link2.htm" >link2</a>
<a href= "link3.htm" >link3</a>
Coarse look may also reflect the use of expression advantage, but if your page has dozens of or even hundreds of links, at this time you will also mechanical ctrl+c,ctrl+v Mody, not to mention the two comparisons, which produces more redundant code?
The use of 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>
Description
The inside of the star is its own arbitrary definition of attributes, you can follow the definition of their own, and then included in the expression () The statement is a JS script, in the custom attribute and expression between the two do not forget to have a quotation mark, because the essence or CSS, So put it inside the style label, not the script. OK, so it is easy to use a word to achieve the link in the Page dashed box elimination. But you should not be complacent, if the trigger effect is a CSS attribute changes, then the results will be different from your original intention. For example, if you want to change the color of a text box in a page by moving it out of the mouse, you might take it for granted that you should write
* * Text has garbled, no time to amend, sorry!*/
But the result is a script error, the correct writing should be the definition of CSS style into the function, as follows:
<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" >
Attention:
Not very much, it is generally not recommended to use expression because expression is more demanding on browser resources
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
