CSS Control Div Under the image Adaptive solution: The picture does not exceed the maximum width

We (especially beginners like me) often encounter a problem-the image is adaptive. The 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 occasionally asked. Why? The reason is simple: we can't ask web editors or your forum members to crop images or get to know the most basic HTML code-although that doesn't have much technical content.

The former solution is mainly to use JS to achieve, but the people who used to know that the method is a bit cumbersome. Another is the definition of over-flow:hidden in an external container. However, this method only cuts pictures and does not automatically apply. The following approach should appear thanks to the great css2.0 and the greater Microsoft (without it there is no need to have so wordy code out ^_^). I only in ie6.0,ff1.5, opera7.0 in WinXP under test pass, hope through this article to attract more expert guidance. The key is: max-width:780px; and the following line.

Fixed pixel adaptation:

Run the Code box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

[Ctrl + a All selection tips: You can modify some of the code, then press run]

Percent adaptation:

Run the Code box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

[Ctrl + a All selection tips: You can modify some of the code, then press run]

Remind:

1 The method is not just for IMG; 2 max-width,max-height,min-width,min-height.

Introduction to expression usage in CSS DOZB

Defined

IE5 and later versions support the use of expression in CSS to correlate CSS properties with JavaScript expressions, where the CSS property can be either an intrinsic property of an element or a custom property. This means that the CSS property can be followed by a JavaScript expression, and the value of the CSS property equals the result of the JavaScript expression calculation. You can directly reference the properties and methods of the element itself in an expression, or you can use other browser objects. The expression is as if it were in a member function of the element.

assigning values to element intrinsic properties

For example, you can place the location 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:e Xpression (document.body.offsetheight-110 + "px"); background:red; }

Assigning values to element custom attributes

For example, remove the links on the page dotted box.

The usual practice is to:

<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>

Rough look may also reflect the advantages of using expression, but if you have dozens of or even hundreds of links on the page, then you will also be mechanically ctrl+c,ctrl+v it, not to mention the comparison between the two, which produces more redundant code?

The following are the ways to use expression: 　

<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 star inside is the attribute you define arbitrarily, you can define it as you like, and then the statement contained in expression () is the JS script, and there is a quotation mark between the custom attribute and expression, because it is still CSS. So put it in the style tag, not inside the script. OK, so it is easy to use a sentence to achieve the link in the page to eliminate the dotted box. But don't be complacent, if the trigger is a CSS property change, then the results will be different from what you intended. 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/* garbled, there is no time to fix it, sorry!*/can result in a script error, the correct wording should be written in the CSS style definition in 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 necessary, it is generally not recommended to use expression because expression has a higher demand for browser resources

CSS Control div Self-adapting solution: The picture does not exceed the maximum width