Css skills: solutions to adaptive image size under div

Today, a webmaster friend of the Helper house xiaobian encountered a problem about the adaptive size of the DIV and image when modifying the template. The reason for this problem is very simple, the reason is that you didn't set the height and width for the div, so when you set the width and height, you will not be able to adapt to it. After searching, find some solutions and share them with you:

In the past, the solution was mainly implemented by using js, but people who have used it all know that the solution is a bit cumbersome. Another way is to define over-flow: hidden in an external container. However, this method will only cut the image and will not apply automatically.

Shape:

<Script language = "JavaScript"> function imgSize (url, id) {var imgObj = new Image (); var imgDiv = document. getElementById (id) imgObj. src = url; imgDiv. innerHTML = imgObj. width + "×" + imgObj. height;} function changeSize (obj, width) {if (obj. width> width) {obj. width = width ;}</SCRIPT> <style type = "text/css"> body {font-size: 12px; text-align: center; margin: 0px; padding: 0px ;}# pic {margin: 0 auto; width: 100%; padding: 0 ;}# pic img {max-width: 758px; myimg: expression (onload = changeSize (this, 758);} </style> <div id = "pic">  </div> <br/> <center> If the page cannot be displayed, press Ctrl + F5 to refresh the page. For more webpage code: <a href = 'HTTP: // www.bkjia.com/'target = '_ blank'> http://www.bkjia.com/</a> </center>

Tip: the code can be modified before running!

Thanks to the great css2.0 and the great microsoft (without it, there will be no such code ). I only passed the test in ie6.0, ff1.5, and opera7.0 in winXP. I hope this article will help you learn more. The key is: max-width: 780px; and the following line.

Fixed pixel adaptation:

<! DOCTYPE html> 





Tip: the code can be modified before running!

Adaptive by percentage:

<! DOCTYPE html> 





Tip: the code can be modified before running!

Reminder:
1. This method is not only used for img;
2 max-width, max-height, min-width, min-height.