আনুপাতিকভাবে / আকৃতির অনুপাত রেখে চিত্রগুলিকে কীভাবে পুনরায় আকার দিন?

Question

আমার কাছে এমন চিত্র রয়েছে যা মাত্রাগত দিক থেকে বেশ বড় হবে এবং আমি অনুপাতগুলি বাধা বজায় রেখে jQuery দিয়ে সেগুলি সঙ্কুচিত করতে চাই, অর্থাত্ একই দিক অনুপাত।

কেউ আমাকে কিছু কোডে নির্দেশ করতে পারে, বা যুক্তিটি ব্যাখ্যা করতে পারে?

Comments

আপনি jQuery কেন ব্যবহার করতে হবে তা বিশদ দিয়ে বলতে পারেন? একটি সিএসএস-কেবল সমাধান রয়েছে ( আমার উত্তর দেখুন ): সেট করুন max-widthএবং max-heightকরুন 100%।

— ড্যান ড্যাসকলেসকু

যদি কেউ না জানেন তবে আপনি যদি চিত্রটির মাত্র একটি মাত্রা (প্রস্থ বা উচ্চতা) নির্ধারণ করেন তবে এটি পুনরায় আকারযুক্ত আনুপাতিক। ওয়েবে ভোর হওয়ার পর থেকে এভাবেই চলে আসছে। উদাহরণস্বরূপ:<img src='image.jpg' width=200>

— getFree

এছাড়াও, আপনি ব্যান্ডউইথ এবং মোবাইল ডিভাইস র‌্যাম সংরক্ষণ করতে slimmage.js এর মতো কিছু ব্যবহার করার কথা বিবেচনা করতে পারেন ।

— লিলিথ নদী

Answer 1

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

Comments

দুঃখিত, কিছু গণিতবিদ যুক্তি অনুপস্থিত… আপনি যখন এটি সব বাড়ানোর প্রয়োজন হয় তখন কি হয় (আসুন আমরা বলি যে আপনি ম্যাক্সহাইট বৃদ্ধি করছেন)?

— বেন

এটি কি সিএসএস দিয়েই করা যায়? (সর্বাধিক প্রস্থ, উচ্চতা: অটো, ইত্যাদি?)

— ট্রোননাথন

এই জন্য কেন jQuery প্রয়োজন তা নিশ্চিত নয়। ক্লায়েন্টের আনুপাতিকভাবে ইমেজ মাপে সিএসএস সঙ্গে সম্পন্ন করা যেতে পারে, এবং এটি তুচ্ছ আছে: ঠিক এর সেট max-widthএবং max-heightকরতে 100%। jsfiddle.net/9EQ5c

— ড্যান ড্যাসকলেসকু

এটি যদি স্ট্যাটামেন্টের কারণে সিএসএস দিয়ে করা যায় না। আমার বিশ্বাস বিন্দুটি থাম্বনেল চিত্রটি পূরণ করা। চিত্রটি যদি খুব বেশি লম্বা হয় তবে এটি সর্বোচ্চ প্রস্থ হতে হবে, যদি চিত্রটি আরও প্রশস্ত হয় তবে এটি সর্বোচ্চ উচ্চতা হতে হবে। আপনি যদি সিএসএস সর্বাধিক প্রস্থ, সর্বাধিক উচ্চতা করেন তবে আপনি পুরো

— পূরণের

এই কোডটি কি ব্রাউজারগুলিতে সমস্যা সৃষ্টি করতে পারে, ক্রাশ করতে বা ধীর করে দিতে পারে ??

— ডাজা বন্ড 20'13

Answer 2

আমি মনে করি এটি একটি দুর্দান্ত পদ্ধতি :

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

Comments

বেশিরভাগ উত্তম উত্তর! উচ্চতা এবং প্রস্থ উভয়ই বড় হলে সঠিক উত্তরটি তার মুখে সমতল হয়। সত্যিই, ভাল, এছাড়াও খুব ভাল গোঁফ।

— সূচনাগুলি

আপনি ঠিক যে @stauross সম্পর্কে ঠিক বলেছেন, দশমিক পিক্সেলের কিছুটা অপ্রত্যাশিত ফলাফল হতে পারে । আমার ব্যবহারের ক্ষেত্রে তবে এটি ছিল নগণ্য। আমি মনে করি Math.floorসত্যই একটি পিক্সেল নিখুঁত নকশা সাহায্য করবে :-)

— জেসন জে। নাথান

ধন্যবাদ, আমার এটি প্রায় "ওয়ান-লাইনার" দরকার ছিল।

— হার্নান

ধন্যবাদ জেসন, এই উত্তরটি আমাকে সত্যিই সাহায্য করেছিল।

— অশোক শাহ

এটি এই সমস্যাটি পরিচালনা করার দুর্দান্ত উপায়! আমি function imgSizeFit(img, maxWidth, maxHeight){ var ratio = Math.min(1, maxWidth / img.naturalWidth, maxHeight / img.naturalHeight); img.style.width = img.naturalWidth * ratio + 'px'; img.style.height = img.naturalHeight * ratio + 'px'; }

— ইমগ

Answer 3

যদি আমি প্রশ্নটি সঠিকভাবে বুঝতে পারি তবে এর জন্য আপনার জিক্যুরির দরকার নেই। ক্লায়েন্টের আনুপাতিকভাবে ইমেজ মাপে একা সিএসএস সঙ্গে সম্পন্ন করা যেতে পারে: ঠিক এর সেট max-widthএবং max-heightকরতে 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>​

এখানে হুটোহুড়ি: http://jsfiddle.net/9EQ5c/

Comments

এটি উপরের তুলনায় অনেক সহজ উত্তর। ধন্যবাদ। বিটিডব্লু আপনি কীভাবে আপনার পোস্টটিতে স্ক্রোল করতে "আমার উত্তর" লিঙ্কটি পেয়েছিলেন?

— SnareChops

@ স্নেয়ারচপস: এটি কেবল একটি এইচটিএমএল অ্যাঙ্কর ।

— ড্যান ড্যাসক্লেস্কু

@ স্নেয়ারচপস: আপনি যদি উত্তরটির নীচে "ভাগ করুন" লিঙ্কটি দেওয়া লিঙ্কটি ব্যবহার করেন তবে এটি উত্তরেও স্ক্রোল করবে।

— ফ্লিম

@ ফ্লিম কারণ স্প্যানগুলি প্রদর্শন করা হয় না: ডিফল্টরূপে ব্লক করুন। কেবল প্রদর্শন যুক্ত করুন: ব্লক করুন, বা একটি ডিভ করুন।

— মাহমোফ

আমার ক্ষেত্রে আইএমজিটি ওয়ার্ডপ্রেসের সাথে রেন্ডার করা হয়েছিল যাতে এটির প্রস্থ এবং উচ্চতা সেট থাকে। width: auto; height: auto;

— সিএসএসে আমিও

Answer 4

দিক অনুপাত নির্ধারণ করার জন্য , আপনাকে লক্ষ্য নির্ধারণের জন্য একটি অনুপাত থাকা দরকার।

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

এই উদাহরণে আমি 16:10সাধারণত মনিটরের দিকের অনুপাতটি ব্যবহার করি ।

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

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

উপরে থেকে ফলাফল হবে 147এবং300

Comments

বিবেচনা করে, 300 = তির্যক প্রস্থ = উচ্চতা * অনুপাত এবং উচ্চতা আপনি যা বলেছিলেন

— তেমনই

Answer 5

আসলে আমি এই সমস্যার মধ্যে পড়েছি এবং আমি যে সমাধানটি পেয়েছি তা অদ্ভুতভাবে সহজ এবং অদ্ভুত ছিল

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

এবং অলৌকিকভাবে চিত্রটি নতুন উচ্চতায় রূপান্তরিত হয় এবং একই অনুপাত সংরক্ষণ করে!

Comments

আমি মনে করি এটি দরকারী - তবে আমি মনে করি এটি খুব

— প্রশস্তভাবে যদি

আপনি যখন অন্যান্য বৈশিষ্ট্যটি সেট না করেন তখন এই জিনিসগুলি কাজ করে। (এই ক্ষেত্রে প্রস্থ)

— NoobishPro

Answer 6

এই সমস্যাটির জন্য 4 টি পরামিতি রয়েছে

1. বর্তমান চিত্র প্রস্থ iX
2. বর্তমান চিত্র উচ্চতা iY
3. লক্ষ্য ভিউপোর্ট প্রস্থ সিএক্স
4. লক্ষ্য ভিউপোর্ট উচ্চতা সিওয়াই

এবং 3 টি পৃথক শর্তসাপেক্ষ পরামিতি রয়েছে

1. সিএক্স> সিওয়াই?
2. iX> সিএক্স?
3. iY> সিওয়াই?

সমাধান

1. লক্ষ্য ভিউ পোর্ট এফ এর ছোট দিকটি সন্ধান করুন
2. বর্তমান ভিউ পোর্ট এল এর বৃহত্তর দিকটি সন্ধান করুন
3. উভয় এফ / এল = ফ্যাক্টরের উপাদানটি সন্ধান করুন
4. বর্তমান বন্দরের উভয় দিককে গুণক অর্থাৎ fX = iX * গুণক দিয়ে গুণ করুন; fY = iY * ফ্যাক্টর

এটাই আপনার করা দরকার।

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

এটি একটি পরিণত ফোরাম, আমি আপনাকে এর জন্য কোড দিচ্ছি না :)

Comments

এর পিছনে পদ্ধতিটি পোস্ট করা দুর্দান্ত, তবে কোড পোস্ট করে ব্যবহারকারীকে আসলে সহায়তা না করার জন্য আমি আপনাকে চিহ্নিত করি। কিছুটা বাধা মনে হচ্ছে

— ডোজি

"কেউ আমাকে কিছু কোডের দিকে নির্দেশ করতে পারে, বা যুক্তিটি ব্যাখ্যা করতে পারে?" - স্পষ্টতই তিনি তাকে কেবল পদ্ধতিটি ব্যাখ্যা করার সাথেই ঠিক ছিলেন। ব্যক্তিগতভাবে, আমি মনে করি যে কাউকে কোড কপি এবং পেস্ট করার চেয়ে পদ্ধতিগুলি বুঝতে সহায়তা করার জন্য এটি কাউকে সহায়তা করার সর্বোত্তম উপায়।

— JessMcintosh

@ জেসমিসিনটোস, মূল প্রশ্নের বাজিলিয়ান সম্পাদনাগুলি আপনার মন্তব্যটিকে প্রসঙ্গের বাইরে তুলে ধরেছে :)

— জেসন জে নাথান

Answer 7

নেই <img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" > সহায়তা প্রয়োজন?

ব্রাউজার দিক অনুপাত অক্ষত রাখার যত্ন নেবে।

অর্থাত্ max-widthযখন চিত্রের প্রস্থ উচ্চতার চেয়ে বেশি হয় এবং এর উচ্চতা আনুপাতিকভাবে গণনা করা হবে। max-heightউচ্চতা প্রস্থের চেয়ে বেশি হলে একইভাবে কার্যকর হবে।

এর জন্য আপনার কোনও jQuery বা জাভাস্ক্রিপ্টের দরকার নেই।

Ie7 + এবং অন্যান্য ব্রাউজারগুলি ( http://caniuse.com/minmaxW ) দ্বারা সমর্থিত ।

Comments

দুর্দান্ত টিপ! কেবলমাত্র এইচটিএমএল কোডে নয়, সিএসএস কোনও সিএসএস ফাইলে রেখে দেবেন।

— চিহ্নিত করুন

আমি মনে করি এটির সাথে সমস্যাটি পৃষ্ঠাটি লোড না হওয়া পর্যন্ত সর্বাধিক প্রস্থ এবং সর্বোচ্চ উচ্চতা কী তা আপনি জানেন না যখন এটি কাজ করবে না। যে কারণে একটি জেএস সমাধান প্রয়োজন। এটি সাধারণত প্রতিক্রিয়াশীল সাইটগুলির ক্ষেত্রে হয়।

— জেসন জে নাথন

Answer 8

এটি সমস্ত সম্ভাব্য অনুপাত সহ চিত্রগুলির জন্য কাজ করা উচিত

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

Answer 9

এখানে মেহেদিওয়ের উত্তরের সংশোধন। নতুন প্রস্থ এবং / অথবা উচ্চতা সর্বাধিক মানতে সেট করা হচ্ছে না। : একটি ভালো পরীক্ষা ক্ষেত্রে নিম্নলিখিত (1768 x 1075 পিক্সেল) হয় http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png । (খ্যাতিমান পয়েন্টের অভাবে আমি উপরে এটি সম্পর্কে মন্তব্য করতে পারিনি))

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

Answer 10

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

Comments

কোনও পোস্টের উত্তর দেওয়ার সময় কেবল কোড নয়, দয়া করে ব্যাখ্যা যুক্ত করে বিবেচনা করুন।

— জর্জেন আর

Answer 11

চিত্রটি যদি আনুপাতিক হয় তবে এই কোডটি চিত্রের সাথে মোড়ক পূর্ণ করবে। চিত্রটি অনুপাতে না থাকলে অতিরিক্ত প্রস্থ / উচ্চতা ক্রপ হবে।

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

Answer 12

অতিরিক্ত টেম্প-ওয়ার্স বা বন্ধনী ছাড়াই।

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

মনে রাখবেন: অনুসন্ধান ইঞ্জিনগুলি এটি পছন্দ করে না, যদি প্রস্থ এবং উচ্চতার বৈশিষ্ট্য চিত্রটির সাথে খাপ খায় না, তবে তারা জেএস জানে না।

Answer 13

কিছু পরীক্ষা এবং ত্রুটির পরে আমি এই সমাধানটিতে এসেছি:

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

Answer 14

সিএসএস ব্যবহার করে পুনরায় আকারটি অর্জন করা যেতে পারে (দিক অনুপাত বজায় রাখা)। এটি ড্যান ড্যাসাকলেসকু পোস্ট দ্বারা অনুপ্রাণিত আরও সরল উত্তর।

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

Answer 15

2 পদক্ষেপ:

পদক্ষেপ 1) চিত্রের মূল প্রস্থ / মূল উচ্চতার অনুপাত গণনা করুন।

পদক্ষেপ 2) নতুন উচ্চতা অনুসারে নতুন প্রস্থটি পেতে নতুন পছন্দসই উচ্চতা দ্বারা মূল_ প্রস্থ / মূল_ উচ্চতা অনুপাতটি গুণ করুন।

Answer 16

এই সমস্যাটি সিএসএস দ্বারা সমাধান করা যেতে পারে।

.image{
 max-width:*px;
}

Answer 17

এটি পুরোপুরি আমার জন্য টেনে নেবার উপযোগী আইটেমটির জন্য কাজ করেছে - অ্যাসপেক্টরেটিও: সত্য

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