ব্যাকগ্রাউন্ড-আকারের সমতুল্য: চিত্র উপাদানগুলির জন্য কভার এবং ধারণ রয়েছে?

Question

আমার অনেক পৃষ্ঠা এবং বিভিন্ন ব্যাকগ্রাউন্ডের ছবি সহ একটি সাইট রয়েছে এবং আমি সেগুলি সিএসএস থেকে প্রদর্শন করি:

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

তবে আমি <img>উপাদানগুলিকে ব্যবহার করে একটি পৃষ্ঠায় বিভিন্ন (পূর্ণস্ক্রিন) চিত্র দেখাতে চাই এবং আমি তাদের উপরের background-image: cover;সম্পত্তি হিসাবে একই বৈশিষ্ট্য থাকতে চাই (চিত্রগুলি সিএসএস থেকে প্রদর্শিত হতে পারে না, তারা অবশ্যই HTML ডকুমেন্ট থেকে প্রদর্শিত হবে) be

সাধারণত আমি ব্যবহার করি:

div.mydiv img {
    width: 100%;
}

বা:

div.mydiv img {
    width: auto;
}

ছবি পূর্ণ এবং প্রতিক্রিয়াশীল করতে। তবে width: 100%স্ক্রিনটি খুব সংকীর্ণ হয়ে উঠলে চিত্রটি খুব বেশি সঙ্কুচিত হয়ে যায় এবং নীচের স্ক্রিনে শরীরের পটভূমির রঙ দেখায়। অন্য পদ্ধতিটি, width: auto;কেবলমাত্র চিত্রটিকে পূর্ণ আকার দেয় এবং স্ক্রিন আকারে সাড়া দেয় না।

চিত্রটি একইভাবে প্রদর্শন করার উপায় আছে কি background-size: cover?

Comments

দুর্দান্ত প্রশ্ন।

— wonsuc

Answer 1

সমাধান # 1 - অবজেক্ট-ফিট সম্পত্তি ( অভাবযুক্ত আইই সমর্থন )

object-fit: cover;সবেমাত্র img এ সেট করুন।

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<img src="http://lorempixel.com/1500/1000" />

এমডিএন দেখুন - সম্পর্কিত object-fit: cover:

প্রতিস্থাপিত সামগ্রীটি উপাদানটির সম্পূর্ণ সামগ্রীর বাক্সটি পূরণ করার সময় এর অনুপাতের অনুপাত বজায় রাখতে মাপ দেওয়া হয়। যদি বস্তুর অনুপাতটি তার বাক্সের অনুপাতের সাথে মেলে না, তবে অবজেক্টটি ফিট করতে ক্লিপ হবে।

এছাড়াও, এই কোডেপেন ডেমোটি দেখুন যা object-fit: coverকোনও চিত্রের সাথে background-size: coverপ্রযোজ্য সাথে কোনও ব্যাকগ্রাউন্ড চিত্র প্রয়োগ করা হয়

---

সমাধান # 2 - CSS এর সাথে একটি পটভূমি চিত্রের সাথে img প্রতিস্থাপন করুন

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}

<img src="http://placehold.it/1500x1000" />

Comments

এই মন্তব্যের সময়, অবজেক্ট-ফিট এখনও ইন্টারনেট এক্সপ্লোরারের কোনও সংস্করণ (এমনকি এজ) দ্বারা সমর্থিত নয়। এটি যদিও বিবেচনাধীন রয়েছে ।

— মাইক Kormendy

আইজিতে এখনও অবজেক্ট-ফিট সমর্থিত নয়। আমি যদি প্রোডাকশন সাইটে এবং আপনি IE ব্যবহারকারীদের সম্পর্কে যত্নবান হন তবে আমি দূরে থাকব।

— ট্র্যাভিস মাইকেল হেলার

আপনি IE এবং পুরানো সাফারির জন্য # 1 এর জন্য পলিফিল যোগ করতে পারেন: github.com/bfred-it/object-fit-images

— ভ্যালেরা তুমাস

দ্বিতীয় সমাধান সঙ্গে যত্নশীল। মোবাইল ব্রাউজারগুলিতে ভিএইচ

— র

@ রোকক আপনি এই জাতীয় জিনিসগুলি ক্যানিয়াসে সন্ধান করতে পারেন: ক্যানিউজ. com/ # search = background- att :) PS আমি মনে করি আমরা সকলেই নিশ্চিতভাবে বলতে পারি যে আইই কখনও এই বৈশিষ্ট্যের জন্য সমর্থন পাবেন না এবং যেহেতু কোনও পলিফিল নেই, তাই আমরা ' জেএস / সিএসএস হ্যাকের সাথে পুনরায় তাত্ক্ষণিক বা আটকে থাকা যতক্ষণ না এমএস সিদ্ধান্ত নেয় (অবশেষে) আইডিটিকে উইন্ডোজ থেকে সরিয়ে দিয়ে "হত্যার" সময় এসেছে।

— সিডঅফসি

Answer 2

আসলে খুব সহজ সিএসএস সমাধান রয়েছে যা আইই 8 তেও কাজ করে:

.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}

<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

Comments

এটি কভারের আচরণের প্রতিরূপ তৈরি করে না, বরং পরিবর্তে src ইমগ থেকে একটি কেন্দ্রিক অংশ কেটে দেয়। Jsfiddle.net/sjt71j99/4 দেখুন - প্রথম ইমগটি আপনার ফসল, পরেরটি ব্যাকগ্রাউন্ড-আকারের মাধ্যমে: কভার, অর্থাৎ আমরা যা চাই, তৃতীয়টি আসল img। আমি ল্যান্ডস্কেপ ইমাগুলি সর্বাধিক উচ্চতার সাথে ন্যূনতম উচ্চতা এবং ন্যূনতম প্রস্থকে প্রতিস্থাপন করেছি: 100%; প্রতিকৃতি ব্যবহারের জন্য সর্বোচ্চ-প্রস্থ: 100%। ল্যান্ডস্কেপ বা প্রতিকৃতি উভয় জন্য কাজ করে এমন একটি সমাধান থাকলে ভাল হবে। কোন ধারনা? এটি এখন পর্যন্ত দেখা সেরা ক্রস ব্রাউজার সমাধান।

— terraling

আপনি ঠিক বলেছেন, এটি ঠিক একই জিনিসটি করে না, আমি কিছু জিনিস চেষ্টা করেছিলাম তবে মনে হয় আপনি এটি 100% কভারের প্রতিরূপ তৈরি করতে পারবেন না, যতক্ষণ না চিত্রটি একটি মাত্রার ধারকের চেয়ে ছোট থাকে ততক্ষণ এটি কাজ করে যদিও।

— সাইমন

@ বিতরণ, আমি জানি এটি একটি পুরানো মন্তব্য, তবে আমার উত্তরটি দেখুন । এটি কেন্দ্রে img অবস্থানে রূপান্তর ব্যবহার করে।

— থিয়াগো বার্কালা

Answer 3

ধরে নিই যে আপনি যে ধারক উপাদানটি পূরণ করতে চান তা করার ব্যবস্থা করতে পারেন, এটি কাজ করে বলে মনে হচ্ছে তবে কিছুটা হ্যাকিশ মনে হচ্ছে। সংক্ষেপে, আমি কেবল min/max-width/heightএকটি বৃহত্তর অঞ্চল ব্যবহার করি এবং তারপরে সেই অঞ্চলটিকে মূল মাত্রায় স্কেল করি।

.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}

<h1>contain</h1>
  <div class="container contain">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
  <h1>cover</h1>
  <div class="container cover">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>

Comments

সম্পূর্ণ একমত. সাধারণ ব্যবহারের জন্য এটি সর্বোপরি সর্বোত্তম সমাধান।

— ভ্যারিস ভ্যাটোলস

এটা দুর্দান্ত। এটা আমাকে সাহায্য করেছে। আপনাকে ধন্যবাদ

— রমন নিকিতসেনকা

Answer 4

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

মনে রাখবেন যে 16 বছরের আগে আপনার যদি আইই, বা এজ সমর্থন করার প্রয়োজন না হয় তবে আপনি আরও ভালভাবে অবজেক্ট-ফিট ব্যবহার করতে পারেন।

পটভূমি আকার: কভার

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}

<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

চিত্রের প্রাকৃতিক আকারটি প্রদর্শিত হচ্ছে তার চেয়ে বড় আকারের ক্ষেত্রে এখানে 1000% ব্যবহৃত হয়। উদাহরণস্বরূপ, চিত্রটি 500x500 হয় তবে ধারকটি কেবল 200x200। এই সমাধানের সাহায্যে চিত্রটি 2000x2000 আকারে পরিবর্তন করা হবে (ন্যূন-প্রস্থ / মিনিটের উচ্চতার কারণে), তারপরে এটি 200x200 (কম কারণে transform: scale(0.1)) কেটে নেওয়া হবে ।

X10 ফ্যাক্টরটি x100 বা x1000 দ্বারা প্রতিস্থাপন করা যেতে পারে তবে 2000x2000 চিত্রটি 20x20 ডিভিডে রেন্ডার করা সাধারণত আদর্শ নয়। :)

পটভূমি আকার: ধারণ করে

একই নীতি অনুসরণ করে, আপনি তা অনুকরণ করতেও ব্যবহার করতে পারেন background-size: contain:

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}

<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Comments

স্কেল ট্রিকটি ইতিমধ্যে এখানে https://stackoverflow.com/a/28771894/2827823 দেওয়া হয়েছে , সুতরাং আমি আরও একটি পোস্ট করার বিষয়টি দেখতে পাচ্ছি না, এবং transformউত্তরগুলির বেশিরভাগ ক্ষেত্রে রয়েছে

— আসন

আপনি যদি কোনও ব্যাখ্যা দিয়ে প্রসারিত করতে চান তবে পরিবর্তে সেই উত্তরটি আপডেট করুন, কারণ একই

— দ্রষ্টব্য

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

— থিয়াগো বার্কালা

আমি এটি অ্যান্ড্রয়েডের ক্রোম মোবাইল ব্রাউজারে চিত্রটি সঙ্কুচিত করে দেখতে পেলাম (এলজি জি 3 এবং স্যামসাং এস 9 তে পরীক্ষিত), আমি এটি আইওএস-এ ক্রোমের সাথে পরীক্ষা করিনি, অ্যান্ড্রয়েডে ফায়ারফক্স মোবাইল এটি সঠিকভাবে প্রদর্শন করেছে।

— জেকো

Answer 5

না , আপনি এটি বেশ মত পেতে পারেন background-size:cover কিন্তু ..

এই পদ্ধতিরটি বেশ জঘন্য বন্ধ: চিত্রটি ল্যান্ডস্কেপ বা প্রতিকৃতি কিনা তা নির্ধারণ করতে এটি জাভাস্ক্রিপ্ট ব্যবহার করে এবং সেই অনুসারে শৈলী প্রয়োগ করে।

জাতীয়

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

সিএসএস

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

Answer 6

আমার অনুকরণ করার দরকার ছিল background-size: contain, তবে object-fitসহায়তার অভাবে ব্যবহার করতে পারিনি । আমার চিত্রগুলিতে সংজ্ঞায়িত মাত্রা সহ ধারকগুলি ছিল এবং এটি আমার জন্য কাজ শেষ করে:

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>

Comments

আপনি min-height: 100%; max-height:100%;ব্যাকগ্রাউন্ড-আকারের সমান ব্যবহার করতে পারেন : কভার;

— ক্রিস সিফার্ট

min-height: 100%; max-height:100%;দিক-অনুপাত সংরক্ষণ করবে না ঠিক ঠিক সমতুল্য নয়।

— রেডইন

Answer 7

সেট করার চেষ্টা উভয় min-height এবং min-widthসঙ্গে, display:block:

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

( বেড়া )

আপনার চিত্রের উপাদান থাকা উপাদানটি দেওয়া থাকলে position:relativeবা position:absoluteচিত্রটি ধারকটি coverেকে দেবে। তবে এটি কেন্দ্রিক হবে না।

অনুভূতভাবে (সেট margin-left:-50%) উপরি প্রবাহিত হবে বা উল্লম্বভাবে (সেট margin-top:-50%) প্রবাহিত হবে কিনা তা আপনি যদি জানেন তবে আপনি সহজেই চিত্রটি কেন্দ্র করতে পারেন । এটি নির্ধারণের জন্য সিএসএস মিডিয়া ক্যোয়ারী (এবং কিছু গণিত) ব্যবহার করা সম্ভব হতে পারে।

Answer 8

সিএসএস দিয়ে আপনি অনুকরণ করতে পারেন object-fit: [cover|contain];। এটি ব্যবহার transformএবং [max|min]-[width|height]। এটি নিখুঁত নয়। এটি এক ক্ষেত্রে কার্যকর হয় না: চিত্রটি ধারকের চেয়ে আরও প্রশস্ত এবং খাটো হয়।

.img-ctr{
  background: red;/*visible only in contain mode*/
  border: 1px solid black;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
  display: block;
}
.img{
  display: block;

  /*contain:*/
  /*max-height: 100%;
  max-width: 100%;*/
  /*--*/

  /*cover (not work for images wider and shorter than the container):*/
  min-height: 100%;
  width: 100%;
  /*--*/

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

<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>

Answer 9

আপনি যা করতে পারেন তা হল উপাদানটিতে ব্যাকগ্রাউন্ড চিত্র যুক্ত করতে 'স্টাইল' বৈশিষ্ট্যটি ব্যবহার করা, আপনি এখনও এইচটিএমএলে চিত্রটি কল করতে পারবেন তবে আপনি এখনও পটভূমি-আকার: কভার সিএসএস আচরণ ব্যবহার করতে সক্ষম হবেন:

এইচটিএমএল:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

সিএসএস:

    .image-div{
    background-size: cover;
    }

এইভাবে আমি ব্যাকগ্রাউন্ড-আকার যুক্ত করব: উপাদানগুলিতে কভার আচরণটি যা আমাকে গতিশীলভাবে এইচটিএমএলে লোড করতে হবে। এরপরে আপনি পটভূমি-অবস্থান: কেন্দ্রের মতো দুর্দান্ত সিএসএস ক্লাস ব্যবহার করতে পারেন use গম্ভীর গর্জন

Comments

বেশিরভাগ উদ্বেগের বিভাজন, তবে এখানে আরও কয়েকজন রয়েছেন: প্রোগ্রামার্স.স্ট্যাকেক্সেঞ্জাও

— দান

Answer 10

IE এর জন্য আপনাকে দ্বিতীয় লাইন - প্রস্থ: 100% অন্তর্ভুক্ত করতে হবে;

.mydiv img {
    max-width: 100%;
    width: 100%;
}

Answer 11

আমি এটি করে 'কোনও মন্তব্য যুক্ত করার' অনুমতি দিচ্ছি না, তবে ইরু পেনম্যান যা করেছেন তা হ'ল এটি আপনার পটভূমির কভারের মতো করার জন্য পরিবর্তন করা দরকার

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

প্রতি

.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}

Answer 12

আমি জানি এটি পুরানো, তবে উপরে যে অনেকগুলি সমাধান আমি দেখছি তাতে ইমেজ / ভিডিওটি ধারকটির পক্ষে খুব বড় হওয়ার কারণ এটি আসলে ব্যাকগ্রাউন্ড-আকারের কভারের মতো অভিনয় করে না। তবে, আমি "ইউটিলিটি ক্লাস" তৈরি করার সিদ্ধান্ত নিয়েছি যাতে এটি চিত্র এবং ভিডিওগুলির জন্য কাজ করে। আপনি কেবল ধারকটিকে ক্লাস। মিডিয়া-কভার-মোড়ক এবং মিডিয়া আইটেম নিজেই ক্লাস দিন med মিডিয়া-কভার

তারপরে আপনার নীচের jQuery রয়েছে:

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

কল করার সময় পৃষ্ঠাটির পুনরায় আকার দেওয়ার বিষয়ে যত্ন নেওয়া নিশ্চিত করুন:

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

তারপরে নিম্নলিখিত সিএসএস:

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

হ্যাঁ এর জন্য jQuery প্রয়োজন হতে পারে তবে এটি বেশ ভাল প্রতিক্রিয়া জানায় এবং ঠিক পটভূমির আকারের মতো কাজ করে: কভার এবং সেই অতিরিক্ত এসইও মান পেতে আপনি এটি চিত্র এবং / অথবা ভিডিওগুলিতে ব্যবহার করতে পারেন।

Answer 13

আমরা ZOOM পদ্ধতির নিতে পারি। আমরা ধরে নিতে পারি যে দিকের চিত্রের উচ্চতা বা প্রস্থ পছন্দসই উচ্চতা বা প্রস্থের চেয়ে কম হলে সর্বাধিক 30% (বা 100% অবধি বেশি) জুমিং এফেক্ট হতে পারে। ওভারফ্লো: গোপনের সাথে বাকী প্রয়োজনীয় জায়গাগুলি আমরা লুকিয়ে রাখতে পারি।

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

এটি বিভিন্ন প্রস্থ বা উচ্চতার চিত্রগুলি সামঞ্জস্য করবে।

Answer 14

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

একই সঠিক লক্ষণগুলির মুখোমুখি। উপরে আমার জন্য কাজ।