it-swarm.com.de

Wie kann ich die Größe der Bilder proportional ändern/das Seitenverhältnis beibehalten?

Ich habe Bilder, deren Abmessungen ziemlich groß sein werden, und ich möchte sie mit jQuery verkleinern, während die Proportionen beschränkt bleiben, d. H. Dasselbe Seitenverhältnis.

Kann mir jemand etwas Code zeigen oder die Logik erklären?

139
kobe

Sehen Sie sich diesen Code aus http://ericjuden.com/2009/07/jquery-image-resize/ an.

$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
    });
});
165
Moin Zaman

Ich denke, das ist eine wirklich coole Methode :

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }
367
Jason J. Nathan

Wenn ich die Frage richtig verstanden habe, brauchen Sie nicht einmal jQuery. Das Verkleinern des Bildes auf dem Client kann nur mit CSS erfolgen: Setzen Sie einfach max-width und max-height auf 100%

<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
    style="max-height: 100%; max-width: 100%">
</div>​

Hier ist die Geige: http://jsfiddle.net/9EQ5c/

61
Dan Dascalescu

Um das Seitenverhältnis zu bestimmen, müssen Sie ein Verhältnis zum Anvisieren haben. 

Height

function getHeight(length, ratio) {
  var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
  return Math.round(height);
}

Width

function getWidth(length, ratio) {
  var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1))));
  return Math.round(width);
}

In diesem Beispiel verwende ich 16:10, da dies das typische Monitor-Seitenverhältnis darstellt.

var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);

console.log(height);
console.log(width);

Ergebnisse von oben wären 147 und 300

9
Rick

ich bin gerade auf dieses Problem gestoßen und die Lösung, die ich fand, war seltsam einfach und komisch

$("#someimage").css({height:<some new height>})

und auf wundersame Weise wird das Bild auf die neue Höhe verkleinert und erhält das gleiche Verhältnis!

6
WindowsMaker

Es gibt 4 Parameter für dieses Problem

  1. aktuelle Bildbreite iX
  2. aktuelle Bildhöhe iY
  3. ziel-Ansichtsfensterbreite cX
  4. ziel-Viewport-Höhe cY

Und es gibt 3 verschiedene bedingte Parameter

  1. cX> cY?
  2. iX> cX?
  3. iY> cY?

lösung

  1. Finden Sie die kleinere Seite des Zielansicht-Ports F
  2. Finden Sie die größere Seite des aktuellen Ansichtsports L
  3. Finden Sie den Faktor für beide F/L = Faktor
  4. Multiplizieren Sie beide Seiten des aktuellen Ports mit dem Faktor, dh fX = iX * Faktor; fY = iY * Faktor

das ist alles was Sie tun müssen.

//Pseudo code


iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height

1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk

2. lE = iX > iY ? iX: iY; //long Edge

3. if ( cX < cY )
   then
4.      factor = cX/lE;     
   else
5.      factor = cY/lE;

6. fX = iX * factor ; fY = iY * factor ; 

Dies ist ein ausgereiftes Forum, ich gebe dir dafür keinen Code :)

4

Hilft <img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" >?

Der Browser sorgt dafür, dass das Seitenverhältnis erhalten bleibt. 

das heißt max-width tritt ein, wenn die Bildbreite größer als die Höhe ist und ihre Höhe proportional berechnet wird. Ebenso ist max-height in Kraft, wenn die Höhe größer als die Breite ist.

Sie benötigen dafür kein Javascript oder jQuery.

Wird von ie7 + und anderen Browsern unterstützt ( http://caniuse.com/minmaxwh ).

4
sojin
$('#productThumb img').each(function() {
    var maxWidth = 140; // Max width for the image
    var maxHeight = 140;    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    var width = $(this).width();    // Current image width
    var height = $(this).height();  // Current image height
    // Check if the current width is larger than the max
    if(width > height){
        height = ( height / width ) * maxHeight;

    } else if(height > width){
        maxWidth = (width/height)* maxWidth;
    }
    $(this).css("width", maxWidth); // Set new width
    $(this).css("height", maxHeight);  // Scale height based on ratio
});
2
khalid khan

Dies sollte für Bilder mit allen möglichen Proportionen funktionieren

$(document).ready(function() {
    $('.list img').each(function() {
        var maxWidth = 100;
        var maxHeight = 100;
        var width = $(this).width();
        var height = $(this).height();
        var ratioW = maxWidth / width;  // Width ratio
        var ratioH = maxHeight / height;  // Height ratio

        // If height ratio is bigger then we need to scale height
        if(ratioH > ratioW){
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratioW);  // Scale height according to width ratio
        }
        else{ // otherwise we scale width
            $(this).css("height", maxHeight);
            $(this).css("width", height * ratioH);  // according to height ratio
        }
    });
});
2
Ajjaah

Die Größenänderung kann mithilfe von CSS erreicht werden (Seitenverhältnis beibehalten). Dies ist eine weitere vereinfachte Antwort, die von Dan Dascalescus Post inspiriert wurde.

http://jsbin.com/viqare

img{
     max-width:200px;
 /*Or define max-height*/
  }
<img src="http://e1.365dm.com/13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg"  alt="Alastair Cook" />

<img src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg" alt="Usman Khawaja"/>

1
rush dee

Nach einigem Ausprobieren kam ich zu dieser Lösung:

function center(img) {
    var div = img.parentNode;
    var divW = parseInt(div.style.width);
    var divH = parseInt(div.style.height);
    var srcW = img.width;
    var srcH = img.height;
    var ratio = Math.min(divW/srcW, divH/srcH);
    var newW = img.width * ratio;
    var newH = img.height * ratio;
    img.style.width  = newW + "px";
    img.style.height = newH + "px";
    img.style.marginTop = (divH-newH)/2 + "px";
    img.style.marginLeft = (divW-newW)/2 + "px";
}
1

Ohne zusätzliche temporäre Werte oder Klammern.

    var width= $(this).width(), height= $(this).height()
      , maxWidth=100, maxHeight= 100;

    if(width > maxWidth){
      height = Math.floor( maxWidth * height / width );
      width = maxWidth
      }
    if(height > maxHeight){
      width = Math.floor( maxHeight * width / height );
      height = maxHeight;
      }

Denken Sie daran: Suchmaschinen mögen es nicht, wenn das Attribut width und height nicht in das Bild passt, aber JS nicht kennen. 

1
B.F.

Wenn das Bild verhältnismäßig ist, füllt dieser Code den Wrapper mit Bild. Wenn das Bild nicht proportional ist, wird die zusätzliche Breite/Höhe abgeschnitten.

    <script type="text/javascript">
        $(function(){
            $('#slider img').each(function(){
                var ReqWidth = 1000; // Max width for the image
                var ReqHeight = 300; // Max height for the image
                var width = $(this).width(); // Current image width
                var height = $(this).height(); // Current image height
                // Check if the current width is larger than the max
                if (width > height && height < ReqHeight) {

                    $(this).css("min-height", ReqHeight); // Set new height
                }
                else 
                    if (width > height && width < ReqWidth) {

                        $(this).css("min-width", ReqWidth); // Set new width
                    }
                    else 
                        if (width > height && width > ReqWidth) {

                            $(this).css("max-width", ReqWidth); // Set new width
                        }
                        else 
                            (height > width && width < ReqWidth)
                {

                    $(this).css("min-width", ReqWidth); // Set new width
                }
            });
        });
    </script>
1
Anu

Hier ist eine Korrektur zu Mehdiways Antwort. Die neue Breite und/oder Höhe wurde nicht auf den Maximalwert gesetzt. Ein guter Testfall ist der folgende (1768 x 1075 Pixel): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png . (Ich konnte oben nicht kommentieren, da es an Ansehenspunkten fehlt.)

  // Make sure image doesn't exceed 100x100 pixels
  // note: takes jQuery img object not HTML: so width is a function
  // not a property.
  function resize_image (image) {
      var maxWidth = 100;           // Max width for the image
      var maxHeight = 100;          // Max height for the image
      var ratio = 0;                // Used for aspect ratio

      // Get current dimensions
      var width = image.width()
      var height = image.height(); 
      console.log("dimensions: " + width + "x" + height);

      // If the current width is larger than the max, scale height
      // to ratio of max width to current and then set width to max.
      if (width > maxWidth) {
          console.log("Shrinking width (and scaling height)")
          ratio = maxWidth / width;
          height = height * ratio;
          width = maxWidth;
          image.css("width", width);
          image.css("height", height);
          console.log("new dimensions: " + width + "x" + height);
      }

      // If the current height is larger than the max, scale width
      // to ratio of max height to current and then set height to max.
      if (height > maxHeight) {
          console.log("Shrinking height (and scaling width)")
          ratio = maxHeight / height;
          width = width * ratio;
          height = maxHeight;
          image.css("width", width);
          image.css("height", height);
          console.log("new dimensions: " + width + "x" + height);
      }
  }
1
Tom O'Hara

2 Schritte:

Schritt 1) ​​Berechnen Sie das Verhältnis von Originalbreite/Originalhöhe des Bildes.

Schritt 2) Multiplizieren Sie das Verhältnis original_width/original_height mit der neuen gewünschten Höhe, um die neue Breite zu erhalten, die der neuen Höhe entspricht.

0
Hitesh Ranaut

Schauen Sie sich dieses Stück an ...

/**
 * @param {Number} width
 * @param {Number} height
 * @param {Number} destWidth
 * @param {Number} destHeight
 * 
 * @return {width: Number, height:Number}
 */
function resizeKeepingRatio(width, height, destWidth, destHeight)
{
    if (!width || !height || width <= 0 || height <= 0)
    {
        throw "Params error";
    }
    var ratioW = width / destWidth;
    var ratioH = height / destHeight;
    if (ratioW <= 1 && ratioH <= 1)
    {
        var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
        width *= ratio;
        height *= ratio;
    }
    else if (ratioW > 1 && ratioH <= 1)
    {
        var ratio = 1 / ratioW;
        width *= ratio;
        height *= ratio;
    }
    else if (ratioW <= 1 && ratioH > 1)
    {
        var ratio = 1 / ratioH;
        width *= ratio;
        height *= ratio;
    }
    else if (ratioW >= 1 && ratioH >= 1)
    {
        var ratio = 1 / ((ratioW > ratioH) ? ratioW : ratioH);
        width *= ratio;
        height *= ratio;
    }
    return {
        width : width,
        height : height
    };
}
0
noopmk