চিত্রের দিকটি-অনুপাত রেখে আপনি <div> পূরণ করার জন্য কোনও চিত্র কীভাবে প্রসারিত করবেন?

Question

আমার এই চিত্রটি স্রোত ছাড়াই <div>বা ছড়িয়ে পড়া ছাড়াই সর্বোচ্চ আকারে প্রসারিত করা দরকার ।

আমি চিত্রটির দিক-অনুপাতটি পূর্বাভাস দিতে পারি না, সুতরাং এটি ব্যবহারের উপায় কিনা তা জানার উপায় নেই:

<img src="url" style="width: 100%;">

অথবা

<img src="url" style="height: 100%;">

আমি উভয়ই ব্যবহার করতে পারি না (যেমন শৈলী = "প্রস্থ: 100%; উচ্চতা: 100%;") কারণ এটি চিত্রটিকে ফিট করার জন্য প্রসারিত করবে <div>।

<div>পর্দা, যা অনির্দেশ্য শতাংশ দ্বারা একটি আকার সেট আছে।

Comments

ডিভের সাথে সংশ্লিষ্ট মাত্রাগুলির সাথে উচ্চতা বা প্রস্থ দুটি পূরণ করার জন্য আপনার যদি চিত্রটির প্রয়োজন হয় তবে আমি কেবল জাভাস্ক্রিপ্ট ব্যবহার করার কথা ভাবতে পারি। এটি কি আপনি আবিষ্কার করতে আগ্রহী?

— ঠিক আছে

সংশ্লিষ্ট: stackoverflow.com/questions/787839/...

— Mottie

Answer 1

২০১ 2016 আপডেট করুন:

আধুনিক ব্রাউজারটি আরও ভাল আচরণ করে। আপনাকে যা করতে হবে তা হ'ল চিত্রের প্রস্থটি 100% ( ডেমো ) এ সেট করা

.container img {
   width: 100%;
}

---

যেহেতু আপনি অনুপাতটি জানেন না, তাই আপনাকে কিছু স্ক্রিপ্টিং ব্যবহার করতে হবে। আমি এখানে jQuery ( ডেমো ) দিয়ে কীভাবে করব তা এখানে :

সিএসএস

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

এইচটিএমএল

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

লিপি

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

Comments

ব্যবহারকারী পুনরায় আকার দেওয়ার আগে চিত্রটি দেখতে পাবে? এই পরীক্ষা করে কেউ?

— রায়লাভলেস

সমাধানটি প্রায় সঠিক, আপনাকে কেবল CSS এর উচ্চতা এবং প্রস্থকে উল্টাতে হবে: যদি চিত্রটি 'লম্বা' হয় তবে প্রস্থটি উচ্চতা নয় 100% হওয়া উচিত (যা আরও বড় এবং উপচে পড়া হবে)। প্রশস্ত ফটোগুলির জন্য অন্য উপায়।

— mbritto

@ এমব্রিটো: আপনি ঠিক বলেছেন, আমাকে সিএসএস সর্বাধিক প্রস্থ / উচ্চতায় পরিবর্তন করতে হয়েছিল এবং আমি একটি ডেমো যুক্ত করেছি

— মোটি

@ মট্টি 930 px প্রস্থের একটি চিত্রের চিত্রের মানটি না হারিয়ে 960 পিক্সের একটি ধারককে ফিট করার উপায় আছে

— বিবেক ড্রাগন

কেন এটি গৃহীত উত্তর। প্রশ্নগুলি তাদের ধারকগুলির জন্য খুব ছোট হওয়া সম্পর্কে is উদাহরণস্বরূপ, কোনও চিত্রের চিত্রের দিকের অনুপাতটিকে অস্বীকার না করেই তার ধারকটির প্রস্থ বা উচ্চতা পূরণ করার জন্য কীভাবে ছোট করা যায়। এছাড়াও, আপনার ডেমোতে, সম্পত্তি width:autoবা height:autoবৈশিষ্ট্যগুলি সরিয়ে ফেলা আপনার চিত্রগুলির প্রদর্শনকে প্রভাবিত করে না। প্রকৃতপক্ষে, আপনি ইমেজটিতে যে সমস্ত সম্পত্তি প্রয়োগ করছেন max-width: 100%তার মধ্যে কেবল কোনও প্রভাব রয়েছে এবং এটি কেবল আড়াআড়ি চিত্রকেই প্রভাবিত করে। তবে সবচেয়ে গুরুত্বপূর্ণ, আপনার উত্তরটি একটি বৃহত্তর ধারক পূরণ করতে কোনও ছোট চিত্রকে প্রসারিত করতে সহায়তা করে না।

— ম্যাটি

Answer 2

কেবলমাত্র CSSএবং এর সাহায্যে এটি করার একটি আরও সহজ উপায় রয়েছে HTML:

এইচটিএমএল:

<div class="fill"></div>

সিএসএস:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

এটি আপনার চিত্রটিকে পটভূমি হিসাবে রাখবে এবং এটি divকোনও বিকৃতি ছাড়াই আকারের জন্য প্রসারিত করবে ।

Comments

একটি অনির্ধারিত সংখ্যক চিত্র দিয়ে এটি কি সম্ভব?

— TrtG

background-size: cover;এখানে আসল যাদু এবং এটি CSS3 এর বেশিরভাগ সাম্প্রতিক সংস্করণগুলিতে যুক্তিসঙ্গত ব্রাউজার সমর্থন রয়েছে (দেখুন: w3schools.com/cssref/css3_pr_background-size.asp )

— জন ক্লসকে

শৈলী এবং বিষয়বস্তু পৃথক করার জন্য, এইচটিএমএলে ইমেজ ইউআরএল সহ মূল্যবান হতে পারে, যেমন<div style="background-image: url('path/to/image.jpg');" class="fill"></div>

— বাইনারিফ্যান্ট

background-size: cover আকৃতির অনুপাত বজায় রাখে না , চিত্রের অংশগুলি যে উপাদানটির সাথে আনুপাতিক নয় তা ক্রপ করা হয়। পড়ুন এখানে

— Alex_Zhong

@ অ্যালেক্স_জং, আপনি অনুপাতের অনুপাতটি ভুল বোঝেন। অ্যাসপেক্ট রেশিওর অর্থ হ'ল চিত্রটি কোনও দিকে প্রসারিত নয় (সুতরাং একটি নিখুঁত বৃত্ত প্রস্থ বা উচ্চতায় উভয়ই ডিম্বাকৃতি হয়ে উঠবে না)। ফসল কাটা দিক অনুপাত বজায় রাখার জন্য প্রয়োজনীয় অংশ হতে পারে (যেমন এটি ওপির ব্যবহারের ক্ষেত্রে রয়েছে)।

— জেরেমি মরিটজ

Answer 3

একটি নিখুঁত সমাধান নয়, তবে এই সিএসএস সাহায্য করতে পারে। জুমটি যা এই কোডটিকে কাজ করে এবং তাত্ত্বিকভাবে ছোট চিত্রগুলির জন্য আদর্শভাবে কাজ করা অসীম হওয়া উচিত - তবে বেশিরভাগ ক্ষেত্রে 2, 4, বা 8 সূক্ষ্মভাবে কাজ করে।

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

Comments

আমি আশা করি এটি ফায়ারফক্সে কাজ করেছে। zoomফায়ারফক্স থেকে কেন কোন ভালবাসা !?

— ম্যাটি

ফায়ারফক্স এখনও zoomকার্যকর করেনি , তবে ভবিষ্যতের রেফারেন্সের জন্য বাগ লিঙ্কটি এখানে রয়েছে: bugzilla.mozilla.org/show_bug.cgi?id=390936

— অ্যাডাম টেলর

Answer 4

যদি আপনি পারেন তবে পটভূমি চিত্রগুলি ব্যবহার করুন এবং সেট করুন background-size: cover। এটি ব্যাকগ্রাউন্ডটিকে পুরো উপাদানটি কভার করবে।

সিএসএস

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

আপনি যদি ইনলাইন চিত্র ব্যবহার করে আটকে থাকেন তবে কয়েকটি বিকল্প রয়েছে। প্রথম, আছে

অবজেক্ট হইয়া

এই সম্পত্তি চিত্র, ভিডিও এবং অনুরূপ অন্যান্য অবজেক্টে কাজ করে background-size: cover।

সিএসএস

img {
  object-fit: cover;
}

দুঃখের বিষয়, ব্রাউজার সমর্থন 11 সংস্করণ পর্যন্ত একেবারেই সমর্থন না করে IE সহ দুর্দান্ত নয়। পরের বিকল্পটি jQuery ব্যবহার করে

সিএসএস + jQuery

এইচটিএমএল

<div>
  <img src="image.png" class="cover-image">
</div>

সিএসএস

div {
  height: 8em;
  width: 15em;
}

কাস্টম jQuery প্লাগইন

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

এর মতো প্লাগইন ব্যবহার করুন

jQuery('.cover-image').coverImage();

এটি একটি চিত্র নেবে, এটি চিত্রের মোড়কের উপাদানটিতে একটি পটভূমি চিত্র হিসাবে সেট করবে এবং imgদস্তাবেজ থেকে ট্যাগটি সরিয়ে ফেলবে । শেষ পর্যন্ত আপনি ব্যবহার করতে পারেন

খাঁটি সিএসএস

আপনি এটি একটি ফ্যালব্যাক হিসাবে ব্যবহার করতে পারেন। চিত্রটি তার ধারকটি coverাকতে স্কেল করবে তবে এটি কমবে না।

সিএসএস

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

আশা করি এটি কারও সাহায্য করবে, শুভ কোডিং!

Comments

আমি ব্যাকগ্রাউন্ড-ইমেজ এবং ব্যাকগ্রাউন্ড-সাইজ ব্যবহার না করে কোনও প্রদত্ত পাত্রে চিত্রগুলি পূরণ করার জন্য একটি খাঁটি সিএসএস সমাধান খুঁজছিলাম এবং এখানে সিএসএস কোড> = আই 9 এবং আধুনিক ব্রাউজারগুলির জন্য দুর্দান্ত কাজ করে। কোডপেন ডেমো এখানে

— এফএলকিউ ডিজাইন

ইন বিশুদ্ধ সিএসএস , আমি মুছে min-এবং পরিবর্তন width: 100%; height: 100%;এবং কাজ! দুর্দান্ত সমাধান! +1 ধন্যবাদ!

— গিলহর্ম ন্যাসিমেণ্টো

background-size: containযদি আপনি চান না যে চিত্রটির কোনওটিই ক্লিপ না হয়।

— পঙ্কডুডল

আপনি নিখুঁত zoom:0.001সিএসএস সমাধান যুক্ত করতে পারেন ।

— আইভর চিউ

Answer 5

CSS3 ধন্যবাদ

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

আই ই এবং এজ সবসময় বাইরের হিসাবে: http://caniuse.com/#feat=object-fit

Answer 6

2019 আপডেট করুন।

আপনি এখন object-fitসিএসএস সম্পত্তি ব্যবহার করতে পারেন যা নিম্নলিখিত মানগুলি গ্রহণ করে:fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

উদাহরণ হিসাবে, আপনার কাছে একটি ধারক থাকতে পারে যা একটি চিত্র ধারণ করে holds

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;

Answer 7

এটি কেবলমাত্র এইচটিএমএল এবং সিএসএস, বা কমপক্ষে বন্যভাবে বিদেশী এবং জটিল দ্বারা অসম্ভব। আপনি যদি কিছু জাভাস্ক্রিপ্ট নিক্ষেপ করতে ইচ্ছুক হন তবে এখানে jQuery ব্যবহার করে একটি সমাধান দেওয়া হয়েছে:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

এটি চিত্রটিকে পুনরায় আকার দেবে যাতে এটি আকারের নির্বিশেষে প্যারেন্ট উপাদানগুলির মধ্যে সর্বদা ফিট করে। এবং এটি $(window).resize()ইভেন্টের সাথে আবদ্ধ হওয়ার সাথে সাথে , যখন ব্যবহারকারী উইন্ডোটির আকার পরিবর্তন করে, চিত্রটি সামঞ্জস্য করবে।

এটি পাত্রে চিত্রটি কেন্দ্র করে দেখার চেষ্টা করে না, এটি সম্ভব হবে তবে আমি অনুমান করি যা আপনি পরে যাচ্ছেন তা নয়।

Comments

আমি ধরে নিই $ img.parent (); সত্যই হওয়া উচিত $ i.parent ();

— জিম্বো জনি

Answer 8

বাহ্যিক containerডিভের প্রস্থ এবং উচ্চতা নির্ধারণ করুন । তারপরে img এ স্টাইলিংয়ের নীচে ব্যবহার করুন:

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

এটি আপনাকে আপনার আইএমগির একটি অনুপাত রাখতে সহায়তা করবে

Comments

এটি ডিভ পূরণ করবে না।

— সোভেন ভ্যান ডেন বুগার্ট

Answer 9

আপনি যদি চিত্রগুলির অনুপাত-অনুপাত রেখে সর্বাধিক প্রস্থ বা উচ্চতা (যাতে এটি খুব বড় না হয়) সেট করতে চান তবে আপনি এটি করতে পারেন:

img{
   object-fit: contain;
   max-height: 70px;
}

Answer 10

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

যেহেতু আমি পিএইচপি এবং একটি ডেটাবেস ব্যাকএন্ডের সাথে পোস্টগুলি যুক্ত করছি তাই খাঁটি সিএসএস প্রশ্নের বাইরে ছিল। তবে আমি jQuery / জাভাস্ক্রিপ্ট সমাধানটি কিছুটা ট্রিবলসাম পেয়েছি, তাই আমি একটি ঝরঝরে (তাই নিজেকে অন্তত নিজেকে মনে করি) সমাধান নিয়ে এসেছি।

এইচটিএমএল (বা পিএইচপি)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

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

Answer 11

আপনি object-fit: cover;পিতামাতার ডিভিতে ব্যবহার করতে পারেন ।

https://css-tricks.com/almanac/properties/o/object-fit/

Comments

দুর্ভাগ্যক্রমে এখনও এই বিষয়ে কোনও আইই বা এজ সমর্থন নেই :( caniuse.com/#feat=object-fit

— লুকপি

Answer 12

এই চিত্রটি স্রোত ছাড়াই বা ছড়িয়ে পড়া ছাড়াই সর্বোচ্চ আকারে প্রসারিত করা সম্ভব ।

আবেদন করুন ...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

ইমেজ শৈলী।

Answer 13

এই পদ্ধতিটি ব্যবহার করে আপনি ডিভ এবং চিত্রের বিবিধ অনুপাতের সাথে আপনার ডিভিটি পূরণ করতে পারেন।

JQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

এইচটিএমএল:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

সিএসএস:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

Answer 14

এটি আমার জন্য কৌশলটি করেছে

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

Answer 15

আপনি যদি আইএমজি ট্যাগ নিয়ে কাজ করেন তবে এটি সহজ।

আমি এটা তৈরি করেছি:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

তবে আমি কীভাবে এটি # পিক {পটভূমিতে কাজ করতে পারি তা খুঁজে পাইনি: url (img / menu.png) y Enyone? ধন্যবাদ

Comments

একটি পরিবর্তন করেছেন এবং আমার সমস্যার উত্তর খুঁজে পেয়েছেন! নাহ এটি কারও সাহায্য করবে। পটভূমি-চিত্র: url (চিত্র / মেনু.পিএনজি); পটভূমি পুনরাবৃত্তি: কোন পুনরাবৃত্তি; অবস্থান: পরম; পটভূমি-আকার: 300px; উচ্চতা: 100%; প্রস্থ: 100%; এবং আপনি জাভাস্ক্রিপ্ট বা jquery ব্যবহার করে ব্যাকগ্রাউন্ড-আকারের মান পরিবর্তন করতে পারেন (.attr ({'শৈলী': 'পটভূমি-আকার: 150px অটো; বাম: 50px; শীর্ষ: 50px;'}))

— আলেেক্সেলা

Answer 16

আমি একই সমস্যা ছিল। আমি এটি কেবল সিএসএস দিয়ে সমাধান করেছি ।

মূলত Object-fit: coverআপনাকে ডিভের মধ্যে একটি ইমেজ অবস্থান করার সময় দিক অনুপাত বজায় রাখার কাজটি অর্জনে সহায়তা করে।

তবে সমস্যাটি Object-fit: coverIE তে কাজ করছে না এবং এটি 100% প্রস্থ এবং 100% উচ্চতা এবং দিক অনুপাত বিকৃত হয়েছিল। অন্য কথায় ইমেজ জুমিং এফেক্টটি ছিল না যা আমি ক্রোমে দেখছিলাম।

আমি যে পদ্ধতিটি গ্রহণ করেছি তা হ'ল নিখুঁতভাবে ধারকটির ভিতরে চিত্রটি স্থাপন করা এবং তারপরে এটি সংমিশ্রণটি ব্যবহার করে ঠিক এটি কেন্দ্রে রেখে দেওয়া:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

এটি একবার কেন্দ্রে আসার পরে আমি ছবিটি উপহার দিই,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

এটি চিত্রটি অবজেক্ট-ফিট: কভারের প্রভাব পেতে পারে।

---

এখানে উপরের যুক্তি প্রদর্শন করা হয়।

https://jsfiddle.net/furqan_694/s3xLe1gp/

এই যুক্তিটি সমস্ত ব্রাউজারে কাজ করে।

Answer 17

এইচটিএমএল:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... এবং আপনি যদি চিত্রটি সেট বা পরিবর্তন করতে চান (উদাহরণস্বরূপ # ফু ব্যবহার করুন):

JQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

javascript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

Answer 18

এখানে পাওয়া অনেকগুলি সমাধানের কিছু সীমাবদ্ধতা রয়েছে: কিছু আইই (অবজেক্ট-ফিট) বা পুরানো ব্রাউজারগুলিতে কাজ করছে না, অন্যান্য সমাধানগুলি চিত্রগুলি স্কেল করে না (কেবল এটি সঙ্কুচিত করে), অনেকগুলি সমাধান উইন্ডোর আকার পরিবর্তন করতে সমর্থন করে না এবং অনেকগুলি রয়েছে are জেনেরিক নয়, হয় সমাধান রেজোলিউশন বা বিন্যাসের প্রত্যাশা করুন (প্রতিকৃতি বা ল্যান্ডস্কেপ)

জাভাস্ক্রিপ্ট এবং jquery ব্যবহার করা যদি সমস্যা না হয় তবে @ তাতু উলমানেনের কোডের ভিত্তিতে আমার কাছে এই সমাধান রয়েছে have আমি কিছু সমস্যা সংশোধন করেছি এবং কিছু দিন কোড যুক্ত করেছি যাতে ছবিটি ডায়নামিকভাবে লোড হয় এবং ভিক্ষা করতে পাওয়া যায় না। মূলত ধারণাটি দুটি পৃথক CSS বিধি রয়েছে এবং প্রয়োজনে সেগুলি প্রয়োগ করা উচিত: একটি যখন সীমাবদ্ধতাটি উচ্চতা হয়, তাই আমাদের সাইডগুলিতে কালো বারগুলি দেখাতে হবে এবং সীমাবদ্ধতা প্রস্থ হলে সিএসএস নিয়ম করা উচিত, সুতরাং আমাদের প্রয়োজন উপরে / নীচে কালো বারগুলি দেখান।

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

এইচটিএমএল উপাদানগুলির জন্য:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>