Làm cách nào để thay đổi kích thước hình ảnh theo tỷ lệ / giữ tỷ lệ khung hình?

Tôi có các hình ảnh sẽ có kích thước khá lớn và tôi muốn thu nhỏ chúng xuống với jQuery trong khi vẫn giữ tỷ lệ bị hạn chế, tức là tỷ lệ khung hình tương tự.

Ai đó có thể chỉ cho tôi một số mã, hoặc giải thích logic?

Hãy xem đoạn mã này từ http://ericjuden.com/2009/07/jquery-image-resize/

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

Tôi nghĩ rằng đây là một phương pháp thực sự hay :

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

Nếu tôi hiểu chính xác câu hỏi, bạn thậm chí không cần jQuery cho việc này. Thu nhỏ hình ảnh theo tỷ lệ trên máy khách có thể được thực hiện chỉ bằng CSS: chỉ cần đặt max-widthvà max-heightthành 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>​

Đây là câu đố: http://jsfiddle.net/9EQ5c/

Để xác định tỷ lệ khung hình , bạn cần phải có một tỷ lệ để nhắm tới.

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

Trong ví dụ này tôi sử dụng 16:10vì đây là tỷ lệ khung hình màn hình điển hình.

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

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

Kết quả từ trên sẽ là 147và300

thực sự tôi vừa gặp phải vấn đề này và giải pháp tôi tìm thấy thật đơn giản và kỳ lạ

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

và thật kỳ diệu, hình ảnh được thay đổi kích thước lên một tầm cao mới và bảo toàn tỷ lệ tương tự!

Có 4 thông số cho vấn đề này

1. chiều rộng hình ảnh hiện tại iX
2. chiều cao hình ảnh hiện tại iY
3. chiều rộng khung nhìn mục tiêu cX
4. chiều cao khung nhìn mục tiêu cY

Và có 3 thông số điều kiện khác nhau

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

giải pháp

1. Tìm phía nhỏ hơn của cổng xem mục tiêu F
2. Tìm phía lớn hơn của cổng xem hiện tại L
3. Tìm hệ số của cả F / L = hệ số
4. Nhân cả hai mặt của cổng hiện tại với hệ số tức là fX = iX *; yếu tố fY = iY *

đó là tất cả những gì bạn cần làm

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

Đây là một diễn đàn trưởng thành, tôi không cung cấp cho bạn mã cho điều đó :)

Có <img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" >giúp được không?

Trình duyệt sẽ chăm sóc giữ nguyên tỷ lệ khung hình.

tức là max-widthđá vào khi chiều rộng hình ảnh lớn hơn chiều cao và chiều cao của nó sẽ được tính theo tỷ lệ. Tương tự max-heightsẽ có hiệu lực khi chiều cao lớn hơn chiều rộng.

Bạn không cần bất kỳ jQuery hoặc javascript nào cho việc này.

Được hỗ trợ bởi eg7 + và các trình duyệt khác ( http://caniuse.com/minmaxwh ).

Điều này sẽ làm việc cho hình ảnh với tất cả các tỷ lệ có thể

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

Đây là một sửa chữa cho câu trả lời của Mehdiway. Chiều rộng và / hoặc chiều cao mới không được đặt thành giá trị tối đa. Một trường hợp thử nghiệm tốt là như sau (1768 x 1075 pixel): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png . (Tôi không thể nhận xét về nó ở trên do thiếu điểm danh tiếng.)

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

Nếu hình ảnh tương xứng thì mã này sẽ lấp đầy trình bao bọc bằng hình ảnh. Nếu hình ảnh không cân xứng thì chiều rộng / chiều cao thêm sẽ bị cắt.

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

Nếu không có temp-vars hoặc ngoặc bổ sung.

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

Hãy ghi nhớ: Các công cụ tìm kiếm không thích nó, nếu thuộc tính chiều rộng và chiều cao không phù hợp với hình ảnh, nhưng họ không biết JS.

Sau một số thử nghiệm và lỗi tôi đã đến với giải pháp này:

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

Thay đổi kích thước có thể đạt được (duy trì tỷ lệ khung hình) bằng CSS. Đây là một câu trả lời đơn giản hơn nữa lấy cảm hứng từ bài đăng của Dan Dascalescu.

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 bước:

Bước 1) tính tỷ lệ giữa chiều rộng / chiều cao ban đầu của Ảnh.

Bước 2) nhân tỷ lệ gốc_ mật độ / gốc_height với chiều cao mới mong muốn để có chiều rộng mới tương ứng với chiều cao mới.

Vấn đề này có thể được giải quyết bằng CSS.

.image{
 max-width:*px;
}

Điều này hoàn toàn làm việc cho tôi cho một mục có thể kéo - facRatio: true

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