Adaptive solution to images under div

Author：Eve Cole Update Time：2025-01-17 10:12:01

We (especially novices like me) often encounter a problem - picture adaptation. This problem is very common. In the article area and forums, it can be said that wherever pictures need to be uploaded, this problem exists, and people ask about it from time to time on the forums. Why? The reason is simple, we cannot require web editors or your forum members to be able to crop images or understand the most basic html code - although this does not have much technical content.

The previous solution was mainly implemented using js, but anyone who has used it knows that this method is a bit cumbersome. Another way is to define over-flow:hidden in an external container. But this method will only cut the picture and will not be applied automatically.

The emergence of the following method should be grateful to the great CSS2.0 and the even greater Microsoft (without it, there would be no need to have such a verbose code ^_^). I have only passed the test on ie6.0, ff1.5, opera7.0 under winXP. I hope to use this article to inspire others and hope that more experts can give guidance. The key is: max-width:780px; and the line below.

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> <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>  </style> </head> <body> <div id=pic> <img src=http ://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Thanks to blueidea for the hotlinked pictures! /> </div> </body> </html>

[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]

Percentage adaptation:

Run code box

<!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>  </style> </head> <body > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Thank you blueidea for the hotlinked picture! /> </div> </body> </html>

[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]

remind:

1 This method is not just 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 expression in CSS to associate CSS properties with Javascript expressions. The CSS properties here can be inherent properties of the element or custom properties. That is to say, the CSS attribute can be followed by a Javascript expression, and the value of the CSS attribute is equal to the result of the Javascript expression calculation. You can directly reference the properties and methods of the element itself in the expression, or use other browser objects. The expression is as if it were within a member function of this element.

Assign values to intrinsic attributes of elements

For example, you can position an element based on 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 dotted boxes for links on the page.

The usual approach is:

At first glance, the advantages of using expression may not be apparent, but if there are dozens or even hundreds of links on your page, would you still use Ctrl+C and Ctrl+V mechanically, let alone both? In comparison, which one generates more redundant code?

The way to use expression is as follows:

a {star : expression(onfocus=this.blur)}

</style>

illustrate:

The star inside is an attribute defined by yourself. You can define it as you like. Then the statement contained in expression() is a JS script. Don’t forget to put a quotation mark between the custom attribute and expression, because in essence It's still CSS, so it's placed in the style tag, not the script. OK, so it is easy to eliminate the link dotted box in the page in one sentence. But don’t be complacent. If the special effect triggered is a CSS attribute change, the result will be different from your original intention. For example, if you want to change the color of the text box on the page as the mouse moves in and out, you may naturally think that it should be written as

/* The original text is garbled, I don’t have time to correct it, sorry!*/

But the result is a script error. The correct way to write it is to write the definition of CSS style into the function, as shown below:

input {star : expression(onmouseover=function()

{this.style.backgroundColor=#FF0000},

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

</style>

Notice:

It is not very necessary. It is generally not recommended to use expression because expression requires relatively high browser resources.