jQuery Seitenverhältnis der Größe

Question

Wie würde ich ein Bild in jQuery zu einem einheitlichen Seitenverhältnis ändern. Zum Beispiel Einstellung maximale Höhe und haben die Breite korrekt ändern. Danke.

Answer 1

Sie können dies manuell berechnen,

das heißt:.

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

Achten Sie darauf, die ursprünglichen Werte für das Bild verwenden, sonst wird es im Laufe der Zeit verschlechtern.

EDIT: Beispiel jQuery-Version (nicht getestet)

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));
}

Answer 2

Hier ist eine nützliche Funktion, könnte das tun, was Sie wollen:

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'});
    });
};

Grundsätzlich greift sie ein Element, zentriert es innerhalb des übergeordneten, dehnt sie dann so passen, dass keiner der Hintergrund des Elternteils sichtbar ist, während das Seitenverhältnis beibehalten wird.

Dann wieder, könnte dies nicht das, was Sie tun wollen.

Answer 3

Verwenden Sie jQueryUI Resizeable

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

aspectratio: true -> maintain Original-Seitenverhältnis

Answer 4

Es gibt keine Rechnungslegung für die Menge der Kopie und Pasters da draußen eh! Ich wollte auch, dies wissen und alles, was ich sah, waren endlose Beispiele für die Skalierung Breite oder Höhe .. wer die anderen überquell wollen würde?!

• Ändern der Größe Breite und Höhe, ohne die Notwendigkeit für eine Schleife
• überschreitet nicht die Bilder ursprünglichen Abmessungen
• Mathematik verwendet, die richtig d.h Breite / Aspekt für die Höhe arbeitet, und Höhe * Aspekt für die Breite so Bilder skaliert tatsächlich richtig auf und ab: /

Sollte geradlinig genug sein, um Javascript oder andere Sprachen zu konvertieren

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

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;
}

Answer 5

Dies ist eine gute Lösung, wenn Sie perfekte Höhe und Breite Seitenverhältnis nach Ernte benötigen wird es perfekt Ernte Verhältnis geben

getPerfectRatio(img,widthRatio,heightRatio){

  if(widthRatio < heightRatio){
    var height = img.scalingHeight - (img.scalingHeight % heightRatio);
    var finalHeight = height
    var finalWidth = widthRatio * (height/heightRatio);

    img.cropHeight = finalHeight;
    img.cropWidth = finalWidth
  }
  if(heightRatio < widthRatio){;
    var width = img.scalingWidth - (img.scalingWidth % widthRatio);
    var finalWidth = width;
    var finalHeight  = heightRatio * (width/widthRatio);
    img.cropHeight = finalHeight;
    img.cropWidth = finalWidth
  }

  return img
  
}