Original jquery plugin Image adaptive

For example, the following:

function: make the picture adaptive centered in the container

limit: container needs a given size

Usage:

1, the introduction of jquery. Then introduce the Fitimg plugin

2, to the need to adapt the image of the container fixed width high

3. Header. Account. img {width:40px; height:40px; margin:5px 5px; float:left;}

4. Add DATA-SRC Attribute

<div class= "img" DATA-SRC = "/images/avatar.jpg" ></div>

The IMG tag is not written here, and the plugin will actively generate the IMG itself, and the container can be the image you want to present.

5. Call

$ (". img"). FITIMG ('/images/capture. png ')

In parentheses, assume that the picture that data-src points to loads the failed substitute picture, assuming that the picture also fails to load, then the container empties everything inside the container.

Source:

(function ($) {$.fn.extend ({fitimg:function (errorimg) {$ (this). "Each (function () {if (this). Data (' src ')} {$ (this). Empty () var img                    = Document.createelement (' img ') $ (this). Append ($ (IMG)) $ (IMG). Load (function ()                        {var parent = $ (this). Parent () var pWidth = Parent.width ()                        var pheight = Parent.height () var owidth = $ (this). Width ()                        var oheight = $ (this). Height () if (Owidth/pwidth > Oheight/pheight)                             {$ (this). Height (pheight) var nwidth = Pheight * owidth/oheight  $ (this). Width (nwidth) $ (this). CSS (' Margin-left ',-(Nwidth-pwidth)                   /2)     } else {$ (this). Width (pWidth)                            var nheight = PWidth * Oheight/owidth $ (this). Height (nheight) $ (this). CSS (' Margin-top ',-(nheight-pheight)/2)} parent.css ('                        Overflow ', ' hidden ')}). Error (function () {if (errorimg)                        {$ (this). Parent (). Data (' src ', errorimg). Fitimg ()}                        else {$ (this). Parent (). Empty ()            }}) $ (IMG). attr (' src ', $ (this). Data (' src ')}}) return $ (This)})}) (JQuery)

Recently (20150831) added two new features

1, and so on the picture is displayed, in order to avoid the network problems caused by the picture has just started very large, and then from the JS Zoom to the appropriate size. This process should not be visible to the user, so a little bit of processing is done

2. Add image Adaptive options. Once only agreed to stretch to the same size as the container, now the addition of optional parameters can be reduced to the container wrapped

The new number of references is called iszoomin, which implies amplification, that is, assuming that the value is not passed to enlarge

The two effect graphs, such as the following

The following is the latest code for the plugin

(function ($) {$.fn.extend ({fitimg:function (errorimg, Iszoomin) {$ (this). "Each (function () {$ (this). Empty () var img = document.createelement (' img ') $ (this).                    Append ($ (img)) Img.style.display = ' None ' $ (IMG). Load (function () { var parent = $ (this). Parent () var pWidth = Parent.width () var pheight = pa                    Rent.height () var owidth = $ (this). Width () var oheight = $ (this). Height ()                        if (Owidth/pwidth > Oheight/pheight) {if (!iszoomin)  {$ (this). Height (pheight) var nwidth = Pheight * owidth  /Oheight $ (this). Width (nwidth) $ (this). CSS (' Margin-left ',-(nwidth         -PWidth)/2)               } else {$ (this). Width (pWidth)                            var nheight = PWidth * Oheight/owidth $ (this). Height (nheight)                    $ (this). CSS (' Margin-top ', (pheight-nheight)/2)}}                            else {if (!iszoomin) {                            $ (this). Width (pWidth) var nheight = PWidth * oheight/owidth                        $ (this). Height (nheight) $ (this). CSS (' Margin-top ',-(nheight-pheight)/2)                            } else {$ (this). Height (pheight)                            var nwidth = Pheight * Owidth/oheight $ (this). Width (nwidth) $ (this). CSS ('Margin-left ', (pwidth-nwidth)/2}} parent.css (' Overflow                    ', ' hidden ') Img.style.display = '}). Error (function () { if (errorimg) {$ (this). Parent (). Data (' src ', errorimg). FITIMG (NULL, Iszoomi                    N)} else {$ (this). Parent (). Empty () }}) $ (IMG). attr (' src ', $ (this). Data (' src '))}) return $    (This)} })}) (JQuery)

2016/12/11 Update

jQuery3.1 has been published, in order to fit jQuery3.1, code changes such as the following

(function ($) {$.fn.extend ({fitimg:function (errorimg, iszoomin) {iszoomin = typeof Iszoomin = = = ' Undefined '? False:iszoomin $ (this). each (function () {$ (this). Empty () var img = document.cr Eateelement (' img ') $ (this). Append ($ (img)) Img.style.display = ' None ' $ (img). O                    N (' Load ', function () {var parent = $ (this). Parent () var pWidth = Parent.width () var pheight = Parent.height () var owidth = $ (this). Width () var Ohei Ght = $ (this). Height () if (Owidth/pwidth > Oheight/pheight) {if (!iszoom In) {$ (this). Height (pheight) var nwidth = Pheight * Owidth/oheigh T $ (this). Width (nwidth) $ (this). CSS (' Margin-left ',-(nwidth-pwidth    )/2)                    } else {$ (this). Width (pWidth)                            var nheight = PWidth * Oheight/owidth $ (this). Height (nheight)  $ (this). CSS (' Margin-top ', (pheight-nheight)/2)}} else  {if (!iszoomin) {$ (this). Width (pWidth) var nheight = PWidth * Oheight/owidth $ (this). Height (nheight) $ (this)                            . css (' Margin-top ',-(nheight-pheight)/2)} else {                            $ (this). Height (pheight) var nwidth = Pheight * owidth/oheight                        $ (this). Width (nwidth) $ (this). CSS (' Margin-left ', (pwidth-nwidth)/2) }                    }                   Parent.css (' overflow ', ' hidden ') Img.style.display = '}). On (' ERROR ' , function () {if (errorimg) {$ (this). Parent (). Data (' src ', errorimg). Fitimg (Nu                    ll, Iszoomin)} else {$ (this). Parent (). Empty ()        }}) $ (IMG). attr (' src ', $ (this). Data (' src '))}) return $ (this) })}) (JQuery)

Original jquery plugin Image adaptive