How to Use jquery to control the display of user-uploaded pictures with too much width

In the web development process, images uploaded by customers in the content area are often broken. The width is the main factor, if the image taken by the camera is directly transmitted to the website without any processing, and the image width is not specified, the content area of the website will inevitably become distorted, next, let's take a look at how to batch process these over-width Images Using jquery at the front end.

Assume that the id = "phpernote" of the content area div is:

<div id="phpernote"><?php echo $news['content'];?></div>

In this case, you can add the following code to the page:

<Script type = "text/javascript" src = "http://www.phpernote.com/js/jquery.min.js"> </script> <script type = "text/javascript"> if ($ ('# phpernote '). length = 1) {var appropriate_width = 720;/* set the appropriate width of the content area */$ ('# phpernote img '). each (function () {if ($ (this ). width ()> appropriate_width?##((this=.css ({'width': appropriate_width + 'px ', 'height': $ (this ). height () * appropriate_width/$ (this ). width () + 'px '}); $ (this ). attr ('title', 'click to view large image '). click (function () {window. open ($ (this ). attr ('src') ;}}}) ;}</script>

The above is just an example, which is adjusted according to your personal situation.

Articles you may be interested in

• Automatically adjust the image width during webpage Loading
• Javascript control text display
• Use SecureCRT to upload and download files (using sz and rz commands)
• Js checks whether the image is loaded and obtains the image width.
• Solution to incorrect display of transparent PNG images in IE6
• How to Use jquery. lazyload to dynamically delay page image loading
• Escape user-passed variables, from ecshop
• Add events to content dynamically generated by jquery