Görüntüleri orantılı olarak yeniden boyutlandırma / en boy oranını koruma

Boyut olarak oldukça büyük görüntülerim olacak ve oranları kısıtlı tutarken jQuery ile küçültmek istiyorum, yani aynı en boy oranı.

Birisi beni bazı kodlara yönlendirebilir veya mantığı açıklayabilir mi?

Http://ericjuden.com/2009/07/jquery-image-resize/ adresinden bu koda bir göz atın.

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

Bu gerçekten harika bir yöntem olduğunu düşünüyorum :

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

Soruyu doğru anlarsam, bunun için jQuery'ye bile ihtiyacınız yoktur. Görüntüyü istemcide orantılı olarak küçültmek yalnızca CSS ile yapılabilir: sadece max-widthve max-heightdeğerini ayarlayın 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>​

İşte keman: http://jsfiddle.net/9EQ5c/

En boy oranını belirlemek için , hedefleyeceğiniz bir orana sahip olmanız gerekir.

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

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

Bu örnekte 16:10tipik monitör en boy oranını kullandığımdan beri kullanıyorum .

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

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

Yukarıdaki sonuçlar 147ve300

aslında bu problemle karşılaştım ve bulduğum çözüm garip bir şekilde basit ve garipti

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

ve mucizevi bir şekilde görüntü yeni yüksekliğe yeniden boyutlandırılır ve aynı oran korunur!

Bu sorunun 4 parametresi vardır

1. geçerli resim genişliği iX
2. geçerli resim yüksekliği iY
3. hedef görüntü alanı genişliği cX
4. hedef görüntü alanı yüksekliği cY

Ve 3 farklı koşullu parametre var

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

çözüm

1. Hedef görünüm bağlantı noktası F'nin daha küçük tarafını bulun
2. Geçerli görünüm bağlantı noktasının daha büyük tarafını bulun L
3. Her iki F / L = faktörünün faktörünü bulun
4. Geçerli bağlantı noktasının her iki tarafını da faktör ile çarpın, yani fX = iX * faktörü; fY = iY * faktörü

tüm yapmanız gereken bu.

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

Bu olgun bir forum, bunun için size kod vermiyorum :)

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

Tarayıcı, en-boy oranını sağlam tutmaya özen gösterir.

örneğin max-width, görüntü genişliği yükseklikten büyük olduğunda ve yüksekliği orantılı olarak hesaplandığında devreye girer. benzer şekildemax-heightYükseklik genişlikten büyük olduğunda da olacaktır.

Bunun için herhangi bir jQuery veya javascript gerekmez.

İe7 + ve diğer tarayıcılar tarafından desteklenir ( http://caniuse.com/minmaxwh ).

Bu, olası tüm oranlara sahip görüntüler için çalışmalıdır

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

İşte Mehdiway'in cevabına bir düzeltme. Yeni genişlik ve / veya yükseklik maksimum değere ayarlanmamıştı. İyi bir test örneği şöyledir (1768 x 1075 piksel): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png . (İtibar puanı eksikliği nedeniyle yukarıda yorum yapamadım.)

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

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

Görüntü orantılıysa, bu kod sarmalayıcıyı görüntü ile dolduracaktır. Görüntü orantılı değilse ekstra genişlik / yükseklik kırpılır.

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

Ek geçici değişkenler veya braketler olmadan.

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

Unutmayın: Genişlik ve yükseklik özelliği görüntüye uymuyorsa arama motorları hoşlanmıyor, ancak JS bilmiyorlar.

Biraz deneme yanılma sonrasında bu çözüme geldim:

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

Yeniden boyutlandırma (en boy oranını koruyarak) CSS kullanılarak elde edilebilir. Bu, Dan Dascalescu'nun gönderisinden ilham alan daha basit bir cevaptır.

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"/>

2 Adım:

Adım 1) Görüntünün orijinal genişliğinin / orijinal yüksekliğinin oranını hesaplayın.

Adım 2) Yeni yüksekliğe karşılık gelen yeni genişliği elde etmek için original_width / original_height oranını istenen yeni yükseklikle çarpın.

Bu sorun CSS tarafından çözülebilir.

.image{
 max-width:*px;
}

Bu tamamen sürüklenebilir bir ürün için benim için çalıştı - aspectRatio: true

.appendTo(divwrapper).resizable({
    aspectRatio: true,
    handles: 'se',
    stop: resizestop 
})