jQuery redimensionner au format

Comment redimensionner une image jQuery dans les mêmes proportions. Par exemple, le réglage maximum de la hauteur et avoir la largeur de redimensionner correctement. Merci.

source d'informationauteur usertest | 2009-11-05

  1. 12

    Vous pouvez calculer manuellement,

    c'est à dire:

    function GetWidth(newHeight,orginalWidth,originalHeight)
{
if(currentHeight == 0)return newHeight;
var aspectRatio = currentWidth / currentHeight;
return newHeight * aspectRatio;
}

    Assurez-vous d'utiliser les valeurs d'ORIGINE de l'image, autrement, il va se dégrader au fil du temps.

    EDIT: exemple la version jQuery (pas testé)

    jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
    var aspectRatio = $(this).data('aspectRatio');
    if (aspectRatio == undefined) {
        aspectRatio = $(this).width() / $(this).height();
        $(this).data('aspectRatio', aspectRatio);
    }
    $(this).height(newHeight); 
    $(this).width(parseInt(newHeight * aspectRatio));
}
  2. 19

    Voici une fonction utile qui pourrait faire ce que vous voulez:

    jQuery.fn.fitToParent = function()
{
    this.each(function()
    {
        var width  = $(this).width();
        var height = $(this).height();
        var parentWidth  = $(this).parent().width();
        var parentHeight = $(this).parent().height();

        if(width/parentWidth < height/parentHeight) {
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        }
        else {
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        }
        var margin_top  = (parentHeight - newHeight) / 2;
        var margin_left = (parentWidth  - newWidth ) / 2;

        $(this).css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                     'height'     :newHeight   + 'px',
                     'width'      :newWidth    + 'px'});
    });
};

    Fondamentalement, il s'empare d'un élément, de centres au sein de la mère, puis l'étire pour s'adapter de sorte qu'aucun des parents de l'arrière-plan est visible, tout en maintenant le ratio d'aspect.

    Puis encore une fois, cela peut ne pas être ce que vous voulez faire.

  3. 9

    Utilisation JQueryUI Redimensionnables 

    $("#some_image").resizable({ aspectRatio:true, maxHeight:300 });

    aspectRatio: vrai -> maintenir le ratio d'aspect original

  4. 1

    Il n'y a pas de comptabilité pour le montant de la copie et de dérouleurs là hein!!! Je voulais aussi savoir ce que je voyais étaient infinies des exemples de mise à l'échelle de la largeur OU de la hauteur.. qui voudrait que les autres déborder?!

    • De redimensionner la largeur ET de la hauteur sans la nécessité d'une boucle
    • Ne dépasse pas les images d'origine dimensions
    • Utilise les mathématiques qui fonctionne correctement je.e largeur/aspect de la hauteur, et la hauteur*aspect pour la largeur de sorte que les images sont réellement mis à l'échelle correctement en haut et en bas :/

    Devrait être assez clair pour convertir de javascript ou d'autres langues

    //////////////

    private void ResizeImage(Image img, double maxWidth, double maxHeight)
{
    double srcWidth = img.Width;
    double srcHeight = img.Height;

    double resizeWidth = srcWidth;
    double resizeHeight = srcHeight;

    double aspect = resizeWidth / resizeHeight;

    if (resizeWidth > maxWidth)
    {
        resizeWidth = maxWidth;
        resizeHeight = resizeWidth / aspect;
    }
    if (resizeHeight > maxHeight)
    {
        aspect = resizeWidth / resizeHeight;
        resizeHeight = maxHeight;
        resizeWidth = resizeHeight * aspect;
    }

    img.Width = resizeWidth;
    img.Height = resizeHeight;
}