CSS automatic control of image size code

CSS automatic control of image size code

A lot of friends will find this site of the article in the picture if the picture is relatively large you will find that the picture is automatically hidden and there is a part of the invisible, then we will introduce you to the use of CSS automatic control image size bar, there is a need to know the friends can enter the reference.

Css prevent image size too large

Add the following CSS:

The code is as follows	Copy Code
IMG { max-width:800px; Height:auto; }

The max-width:800px in the code limits the maximum width of the picture to 800 pixels, while the following hight:auto is critical to ensure that the image has the correct aspect ratio and is not distorted by the width of the adjustment.

Practical examples

WordPress automatically adjust the size of the picture

1. Open your style sheet (style.css) file and add the following code in P img{or similar (you can change all 550 to the width you want)

The code is as follows	Copy Code
P img{ max-width:550px; Width:expression (This.width > 550?) "550px": true); Height:auto; }

2, empty the cache can!
3, also for some old version IE does not support.

If you want to part-time all browsers JQ or JS is the best way

The code is as follows

Copy Code

Method: Setselectreadonly is used to set the pole select control ReadOnly, This one simulates read-only not really read-only Using the Onbeforeactivate,onfocus,onmouseover,onmouseout Event Example:< img src= ' img.jpg ' onload= ' imgautosize (imgd,fitwidth,fitheight) ' >; Create by SL // --------------------------------------------------- function Imgautosize (imgd,fitwidth,fitheight) { var image1=new Image (); Image1.onload = function () { if (this.width>0 && this.height>0) { if (this.width/this.height>= fitwidth/fitheight) { if (this.width>fitwidth) { Imgd.width=fitwidth; imgd.height= (this.height*fitwidth)/this.width; } Else { Imgd.width=this.width; Imgd.height=this.height; } } Else { if (this.height>fitheight) { Imgd.height=fitheight; Imgd.width= (this.width*fitheight)/this.height; } Else { Imgd.width=this.width; Imgd.height=this.height; } } } Image1 = null; } IMAGE1.SRC=IMGD.SRC; ImgD.style.cursor = ' hand '; imgd.onclick= function () {Openwin (this.src, ' Imgphoto ', 600,400)}; Imgd.title = "Click to view the original image in a new window"; }

Previous post 12

CSS automatic control of image size code