বাউন্ডিং বাক্সে ফিট করার জন্য স্কেল চিত্র

Question

কোনও চিত্রকে বাউন্ডিং বাক্সে স্কেল করার (সিপিল-রেশিও রেখে) কেবলমাত্র CSS-র সমাধান রয়েছে? চিত্রটি ধারকের চেয়ে বড় হলে এটি কাজ করে:

img {
  max-width: 100%;
  max-height: 100%;
}

উদাহরণ:

• কেস 1 ব্যবহার করুন (কাজ করে): http://jsfiddle.net/Jp5AQ/2/
• কেস 2 ব্যবহার করুন (কাজ করে): http://jsfiddle.net/Jp5AQ/3/

তবে আমি একটি পাত্রে 100% মাত্রা না হওয়া পর্যন্ত চিত্রটি স্কেল করতে চাই।

• কেস 3 ব্যবহার করুন (কাজ করে না): http://jsfiddle.net/Jp5AQ/4/

Comments

আপনি কি উচ্চতা: 100% এবং প্রস্থ: 100% এর মতো বোঝাতে চান? আপনি পৌঁছতে চান একটি পছন্দসই মাত্রা আছে? অন্যথায় আপনি চিত্রটি প্রসারিত করতে এবং এটির এই মাত্রাগুলিতেও পৌঁছাতে বাধ্য করতে পারেন।

— মাইকভোমর্মানস

@ মিকোভারম্যানরা আমার প্রথম দুটি উদাহরণ দেখুন: আমি যতক্ষণ না একটি মাত্রা 100% এবং অন্যটি <= 100% না হওয়া পর্যন্ত ইমেজটি প্রসারিত করতে চাই

— টমাস গিলারি

@ জ্যাকথেরিপার অবশ্যই অনুপাতের অনুপাত সংরক্ষণ করছেন ...

— থমাস গিলারি

@ গ্রিজেলি উদাহরণগুলি তাদের পক্ষে কথা বলে! যদি তারা উদাহরণগুলির দিকে নজর দিতেন তবে তা সুস্পষ্ট ছিল।

— থমাস গিলারি

@ আর্টিমুজ আমি সম্পূর্ণরূপে একমত নই আপনার প্রশ্নের উত্তরগুলির তিনটি (আমার সহ) পরামর্শ দেয় যে এটি সুস্পষ্ট ছিল না।

— খান

Answer 1

দ্রষ্টব্য: যদিও এটি স্বীকৃত উত্তর, নীচের উত্তরটি আরও সঠিক এবং আপনার যদি একটি পটভূমি চিত্র ব্যবহার করার বিকল্প থাকে তবে বর্তমানে সমস্ত ব্রাউজারগুলিতে সমর্থিত।

না, কেবল উভয় দিকেই এটি করার কোনও সিএসএস নেই। আপনি যোগ করতে পারে

.fillwidth {
    min-width: 100%;
    height: auto;
}

কোনও উপাদানকে সর্বদা এটির 100% প্রস্থ থাকতে এবং স্বয়ংক্রিয়ভাবে উচ্চতাটিকে অনুপাত বা বিপরীতে স্কেল করতে হয় :

.fillheight {
    min-height: 100%; 
    width: auto;
}

সর্বদা সর্বোচ্চ উচ্চতা এবং আপেক্ষিক প্রস্থে স্কেল করতে। উভয়ই করতে, আপনাকে নির্ধারণ করতে হবে যে অনুপাতটি তার ধারকটির চেয়ে বেশি বা কম, এবং সিএসএস এটি করতে পারে না।

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

---

যদিও আপনি জেএস সমাধানের সন্ধান করছেন না তবে কারওর প্রয়োজন পড়লে আমি সেটিকে যুক্ত করব। জাভাস্ক্রিপ্ট সহ এটি হ্যান্ডেল করার সবচেয়ে সহজ উপায় হ'ল অনুপাতের পার্থক্যের ভিত্তিতে একটি শ্রেণি যুক্ত করা। বাক্সের প্রস্থ থেকে উচ্চতা অনুপাতটি যদি চিত্রের চেয়ে বেশি হয় তবে "ফিলিভিডথ" শ্রেণিটি যুক্ত করুন, অন্যথায় "ফিলিহাইট" শ্রেণিটি যুক্ত করুন।

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

Comments

আসলে এখানে একটি সমাধান রয়েছে: CSS3 ব্যাকগ্রাউন্ড-আকার ধারণ করে সেট করা। আমার উত্তর দেখুন।

— থমাস গিলারি

আপনি পুরোপুরি ঠিক বলেছেন। যদিও এখন দেড় বছর পরে, আমি আমার পোস্টটি সম্পাদনা করেছি।

— স্টিফান মুলার

আমি প্রতিক্রিয়া জানাতে চাই যে এটি জিজ্ঞাসা করা প্রশ্নের সঠিক উত্তর যা img ট্যাগের জন্য সিএসএস। এটি প্রাসঙ্গিক কারণ শব্দার্থগতভাবে img ট্যাগটি বিষয়বস্তু, চিত্রটি একটি ডিভের ব্যাকগ্রাউন্ড হিসাবে নয়। কিছু পরিস্থিতিতে এটি অযৌক্তিক করে তোলে (যদি আপনি চিত্র বনাম কনটেইনার অনুপাত জানেন না), অন্যদের জন্য এটি ঠিক ঠিক। ধন্যবাদ।

— ডানকুইলকক্স

Answer 2

CSS3 ধন্যবাদ একটি সমাধান আছে!

সমাধানটি হ'ল চিত্রটি সেটির মতো করা background-imageএবং তারপরে সেট background-sizeকরা contain।

এইচটিএমএল

<div class='bounding-box'>
</div>

সিএসএস

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

এটি এখানে পরীক্ষা করুন: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

সর্বশেষতম ব্রাউজারগুলির সাথে সম্পূর্ণ সামঞ্জস্যতা: http://caniuse.com/background-img-opts

ডিভটি কেন্দ্রে সারিবদ্ধ করার জন্য, আপনি এই প্রকরণটি ব্যবহার করতে পারেন:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Comments

চমৎকার একটি, যদিও আমার উত্তরটি ভুল নয় (আপনি বিশেষত img সম্পর্কে জিজ্ঞাসা করেছিলেন) এটি একটি দুর্দান্ত সমাধান এবং আমার এটি সম্পর্কে চিন্তা করা উচিত। একমাত্র সমস্যাটি হ'ল আইই 8 এখনও এখনও এত ব্যাপকভাবে ব্যবহৃত হয় যে আমি এখনও এটির উপর নির্ভর করতে চাই না, তবে তবুও সুন্দর ধরা।

— স্টিফান মুলার

আপনি কোনও লেটারবক্সিং না চাইলে এটিকে "কভার" এ সেট করুন: পটভূমি-আকার: ধারণ;

— আর্ক্সপেটিকা

এটা লক্ষনীয় যে আপনার এইচটিএমএল সঙ্গে ইমেজ URL গুলি উদ্বুদ্ধ করতে পারেন: <div class=image style="background-image: url('/images/foo.jpg');"></div>। অন্যান্য সমস্ত শৈলী CSS এর সাথে প্রয়োগ করা উচিত।

— আন্দ্রে মিখায়লোভ - লোলমাস

আমি বলব এটি একটি ভয়ঙ্কর পদ্ধতির। এটিকে ব্যাকগ্রাউন্ড-ইমেজে পরিবর্তন করে আপনি এইচটিএমএলে চিত্রটির অর্থগত অর্থ মুছে ফেলছেন।

— animuson

@ অ্যানিমুসন: এটি এখনও আমাকে সাহায্য করেছিল যেহেতু আমি মুদ্রিত প্রতিবেদনের জন্য এইচটিএমএল / সিএসএস ব্যবহার করছি, এবং শব্দার্থবিজ্ঞানের বিষয়ে

— কোনও ত্রুটি

Answer 3

আমি আবিষ্কার করেছি এমন হ্যাকিশ সমাধান এখানে:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

এটি চিত্রটিকে দশগুণ করে বাড়িয়ে দেবে, তবে এটির চূড়ান্ত আকারের 10% পর্যন্ত সীমাবদ্ধ করবে - এভাবে এটি ধারককে আবদ্ধ করে।

background-imageসমাধানের বিপরীতে , এটি <video>উপাদানগুলির সাথেও কাজ করবে ।

ইন্টারেক্টিভ উদাহরণ:

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

Comments

আমি এই সমাধান ভালোবাসি। এটি কেবলমাত্র প্রশ্নের উত্তর দেয় না (আমি জানি, কী ধারণা), এটি জাভাস্ক্রিপ্টের অবলম্বন না করেই সমস্ত আধুনিক ব্রাউজারগুলিতে সুন্দরভাবে কাজ করে!

— এনডিএম 13

আমি এর একটি গিরি দেখতে পছন্দ করি। আমার 400x400 ধারকটিতে একটি ইমগ রাখার পরীক্ষায় ইমাগুলি কেবল কোণায়

— কাটবে

চমৎকার উত্তর! @ যিশুয়া transform-origin: top leftআপনার ফসল বন্ধ করতে যোগ করতে হবে / বোকচন্দর

— জুইপাউটএক্স

উজ্জ্বল। আমার একমাত্র উদ্বেগ হ'ল দুর্বল কোডেড ব্রাউজারে চিত্রের গুণমানের সম্ভাব্য ক্ষতি হ'ল, তবে তাত্ত্বিকভাবে এটি ঠিক কাজ করা উচিত!

— কোডমনকি

আকর্ষণীয়, তবে ক্রোমে কাজ করে না। চিত্রের ক্রপযুক্ত সারিতে ফলাফল।

— ম্যাটকে

Answer 4

আজ, কেবল অবজেক্ট-ফিট বলুন: ধারণ করুন। সমর্থন হ'ল আইই: http://caniuse.com/#feat=object-fit

Comments

IE এর লেখার সময় এখন কেবলমাত্র প্রায় 16% মার্কেট শেয়ার রয়েছে (09/12/2016 10:56 am) এবং ক্রমশ কমতে থাকে, তাই এটি আমার পক্ষে সেরা উত্তর: ডি

— ঝাং

টাইপস বা ভাঙ্গা লিঙ্ক ব্যতীত অন্য কিছু ঠিক করার জন্য অন্য ব্যক্তির জবাব সম্পাদনা করবেন না। আমি কোনও এসও উত্তরে "ক্রেপ ব্রাউজারগুলির জন্য একটি পলিফিল আছে" এর মতো বাচ্চার কিছু বলব না, এবং আমার উত্তরটি এটিকে দেখে বলেছে বলে মনে হচ্ছে এমন সম্পাদনা করার জন্য আমি প্রশংসা করি না। আপনি যদি নিজের শব্দ ব্যবহার করতে চান তবে সেগুলি আপনার নিজের উত্তরে রেখে দিন।

— গ্লেন মেইনার্ড

আমি বলব, আইই সমস্যা নয়, তবে এজ। ক্যানুস মতে object-fitএখনও এটির জন্য বিকাশ চলছে।

— বৈয়ারদেব

এটি সর্বোপরি ভোট দেওয়া উত্তরসমূহ 2017 এবং এর পরে হওয়া উচিত ... উপরের ক্যানিয়াস লিঙ্ক অনুসারে, বিশ্বব্যাপী সমস্ত 90% ব্যবহারকারী এখন এমন একটি ব্রাউজার ব্যবহার করেন যা এটি সমর্থন করে

— fgblomqvist

আমি স্রেফ একটি উত্তর পোস্ট করেছি যা সাথে এবং এর বাইরে কাজ করে object-fit: stackoverflow.com/a/46456673/474031

— gabrielmaldi

Answer 5

এইচটিএমএল:

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

CSS:

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

Answer 6

আপনি খাঁটি সিএসএস এবং সম্পূর্ণ ব্রাউজার সমর্থন, একই সাথে উল্লম্ব-দীর্ঘ এবং অনুভূমিকভাবে দীর্ঘ চিত্রগুলির জন্য এটি সম্পন্ন করতে পারেন।

এখানে একটি স্নিপেট যা ক্রোম, ফায়ারফক্স এবং সাফারি (উভয় ব্যবহার করে object-fit: scale-downএবং ব্যবহার না করে) এ কাজ করে:

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}

Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

Answer 7

ব্যাকগ্রাউন্ড ইমেজ ব্যতীত এবং একটি ধারক প্রয়োজন ছাড়াই অন্য একটি সমাধান (যদিও সীমাবদ্ধ বাক্সের সর্বাধিক আকার অবশ্যই জানা উচিত):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

---

যদি কোনও ধারকের ব্যবহারের প্রয়োজন হয় তবে সর্বাধিক প্রস্থ এবং সর্বোচ্চ-উচ্চতা 100% এ সেট করা যেতে পারে:

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

এর জন্য আপনার এমন কিছু হবে:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

Answer 8

সম্পূর্ণ উইন্ডো ফিট করার জন্য আনুপাতিকভাবে চিত্রটি প্রসারিত করার এই উদাহরণ। উপরের সঠিক কোডটিতে একটি সংশোধন যুক্ত করা$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

শর্ত দুটি আছে। প্রথম এক পরীক্ষণ যদি ইমেজ উচ্চতা DIV আছে কম এবং প্রযোজ্য রাখে .fillheightপ্রস্থের জন্য যখন পরবর্তী চেক শ্রেণী এবং প্রযোজ্য .fillwidthবর্গ। উভয় ক্ষেত্রেই অন্য শ্রেণিটি ব্যবহার করে সরানো হয়.removeClass()

এখানে সিএসএস রয়েছে

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

আপনি প্রতিস্থাপন করতে পারেন 100vhদ্বারা 100%যদি আপনি একটি div সঙ্গে চিত্রটির প্রসারণ করতে চান। সম্পূর্ণ উইন্ডো ফিট করার জন্য আনুপাতিকভাবে চিত্রটি প্রসারিত করার এই উদাহরণ।

Comments

ওপি বিশেষত সিএসএস-কেবল পদ্ধতির জন্য বলেছে।

— কল্ট ম্যাককমার্ক

Answer 9

আপনি নীচের দিকে না কিন্তু উপরের দিকে স্কেল খুঁজছেন?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

এটি যাইহোক, অনুপাতটি লক করে না।

Comments

কারও উত্তর নিচে ভোট দেওয়ার আগে আপনার প্রত্যাশা নিয়ে আরও কিছুটা পরিষ্কার হওয়ার চেষ্টা করুন। বিশেষত যখন তারা আপনার প্রশ্নের উত্তর সম্পাদনা করে আপনার সম্পাদনা দিয়ে সাফ করার আগে।

— খান

এছাড়াও, আরও নম্র হওয়ার চেষ্টা করুন। আপনি যদি সেভাবে কথা বলেন তবে কেউ আপনাকে সহায়তা করবে না।

— মিশা রেজলিন

@ আর্টিমুজ যদি আমি আপনাকে নির্দেশনা থেকে দূরে রাখি তবে আমার ক্ষমা চাই, তবে আপনি যে বিষয়টি অনুপাত-অনুপাত রাখতে চান তা আমার কাছে অস্পষ্ট বলে মনে হয়েছিল, এজন্যই আমি বিশেষভাবে এটি সম্পর্কে মন্তব্য করেছি। এছাড়াও, আপনি লক্ষ্য করবেন যে উদাহরণগুলি থেকে আমি আপনার কোডের একটি স্নিপেট পেস্ট করেছি। আমি বিশ্বাস করি উচ্চতা বজায় রাখা: অটো; আপনি যদি একটি প্রস্থ নির্দিষ্ট করে থাকেন তা আপনার জন্য এটি করবে।

— এরিকসগ

Answer 10

আমি বাক্সের অভ্যন্তরে চিত্রটি কেন্দ্র করে টেবিল ব্যবহার করেছি। এটি দিক অনুপাত এবং স্কেল চিত্রটিকে এমনভাবে রাখে যা পুরোপুরি বাক্সের অভ্যন্তরে থাকে। ছবিটি যদি বাক্সের চেয়ে ছোট হয় তবে এটি কেন্দ্রে যেমন প্রদর্শিত হয় তেমন প্রদর্শিত হয়। কোডের নীচে 40px প্রস্থ এবং 40px উচ্চতার বাক্স ব্যবহার করা হয়। (এটি কতটা কার্যকর তা পুরোপুরি নিশ্চিত নয় কারণ আমি এটিকে আরও জটিল কোড থেকে সরিয়েছি এবং এটিকে কিছুটা সরলীকৃত করেছি)

সিএসএস:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

এইচটিএমএল:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Answer 11

এটি করার সবচেয়ে সহজ এবং সহজ উপায়:

প্রথমে কিছু সিএসএস:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

এইচটিএমএল:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

এই কৌতুক করতে হবে!

Answer 12

এটি আমাকে সহায়তা করেছে:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

তারপরে উপাদানটিতে (আপনি প্রতিক্রিয়া যুক্ত করতে জাভাস্ক্রিপ্ট বা মিডিয়া কোয়েরি ব্যবহার করতে পারেন):

<div class='img-class' style='transform: scale(X);'></div>

আশাকরি এটা সাহায্য করবে!

Answer 13

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

আমি ডাউন ভোট পেয়েছি বলে আমি আমার উত্তরটি সম্পাদনা করছি আমার একাকীকরণটি আরও ব্যাখ্যা করার জন্য।

সিএসএসে উপরে উল্লিখিত স্টাইলগুলির সাথে এখন নীচের এইচটিএমএল ডিভিও চিত্রটি সর্বদা প্রস্থ অনুসারে মাপসই প্রদর্শন করবে এবং প্রস্থের সাথে hight দিক অনুপাতকে সামঞ্জস্য করবে। এই প্রশ্নটি জিজ্ঞাসা মত একটি বাউন্ডিং বক্স ফিট করতে স্কেল স্কেল হবে ।

<div class="boundingbox"><img src="image.jpg"/></div>

Comments

এই উত্তরটি কেবল তখন কার্যকর হয় যখন বাক্সটি প্রশস্ত হওয়ার চেয়ে লম্বা হয়।

— XwipeoutX