সিএসএস চিত্রের আকার, কীভাবে পূরণ করতে হবে, প্রসারিত নয়?

416

আমার একটি চিত্র রয়েছে এবং আমি এটিকে একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা সেট করতে চাই (পিক্সেলগুলিতে)

তবে আমি যদি CSS ( width:150px; height:100px) ব্যবহার করে প্রস্থ এবং উচ্চতা নির্ধারণ করি তবে চিত্রটি প্রসারিত হবে এবং এটি কুরুচিপূর্ণ হতে পারে।

সিএসএস ব্যবহার করে চিত্রগুলি কীভাবে কোনও নির্দিষ্ট আকারে পূরণ করা যায় এবং এটি প্রসারিত করে না?

চিত্রটি পূরণ এবং প্রসারিত করার উদাহরণ:

মূল চিত্র:

মূল

প্রসারিত চিত্র:

টানা

ভরাট চিত্র:

ভরা

দয়া করে নোট করুন যে উপরের পূরণিত চিত্রের উদাহরণে: প্রথমে চিত্রটি আকার পরিবর্তন করা হয় 150x255 (রক্ষিত দিক অনুপাত) এবং তারপরে, এটি ক্রপ করা হয়েছে 150x100।

css image

— মাহদী গিয়াসি
সূত্র

কেবল সেট করার চেষ্টা করুন widthএবং সে heightঅনুযায়ী সামঞ্জস্য করা উচিত

— NewInTheBusiness

3

এটি ইমেজ প্রসারিত । এটি দেখুন: jsfiddle.net/D7E3E

— মাহদি

এটি আকারের নয় চিত্রের একটি অংশ নেয়!

— আলী বেন মেসাউদ

3

ক্রিস Coyier এছাড়াও এই কিছু ভাল সমাধান আছে: css-tricks.com/perfect-full-page-background-image

— ambiguousmouse

1

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

— অ্যালেক্স বনমান

395

আপনি যদি চিত্রটি সিএসএস ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করতে চান তবে একটি মার্জিত সমাধান রয়েছে। কেবলমাত্র ব্যবহার coverবা containমধ্যে background-sizeসিএসএস 3 সম্পত্তি।

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>

স্নিপেট প্রসারিত করুন

যদিও coverআপনি একটি পরিমাপ ইমেজ দেবে containআপনি একটি নিচে ছোটো ইমেজ দেব। উভয়ই পিক্সেল দিক অনুপাত সংরক্ষণ করবে।

http://jsfiddle.net/uTHqs/ (কভার ব্যবহার করে)

http://jsfiddle.net/HZ2FT/ (ব্যবহার করে)

টমাস ফুচসের দ্রুত গাইড অনুসারে এই পদ্ধতির রেটিনা ডিসপ্লেতে বন্ধুত্বপূর্ণ হওয়ার সুবিধা রয়েছে ।

এটি উল্লেখযোগ্য যে উভয় বৈশিষ্ট্যের জন্য ব্রাউজার সমর্থন আই 6-8 বাদ দেয়।

— মার্সেলো দে পোলি
সূত্র

1

যেহেতু আপনি সিএসএসে খাঁটি চিত্রটি পুনরায় আকার দিতে পারেন, এটি আপনাকে একটি বৃহত চিত্র ব্যবহার করতে এবং তারপরে মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে প্রতিটি ডিভাইসের পিক্সেল ঘনত্ব অনুসারে এটিকে স্কেল করতে দেয়।

— মার্সেলো দে পোলি

1

আপনি কী ব্যাখ্যা করতে পারবেন যে এই ক্ষেত্রে ব্যাকগ্রাউন্ড-অবস্থানটি চিত্রের কেন্দ্রের অবস্থানটি শীর্ষ-বাম কোণার পরিবর্তে নির্দেশ করে বলে মনে হচ্ছে? এটি কি পটভূমির আকারের ফলাফল: কভার?

— মাত্তেও

1

আমার চিত্রটি প্রসারিত করে পুরো ডিআইভিতে coversাকা পড়েছে। আমি বক্ররেখার সমাপ্তি দেখতে পাচ্ছি না।

— সন্ধানফোর্ডের জ্ঞান

3

কিসের background-repeat: no-repeat;জন্য? যদি চিত্রটি তার ধারকটিকে coversেকে দেয় তবে তা আর কোনওভাবেই পুনরাবৃত্তি করবে না।

— লুক্কিট

3

'ব্যাকগ্রাউন্ড-পজিশন' 'সেন্টার সেন্টার' তেও সেট করা যেতে পারে। উদাহরণস্বরূপ .:। কনটেনার {... পটভূমি অবস্থান: কেন্দ্র কেন্দ্র; }

— লিও রিবেইরো

556

আপনি CSS সম্পত্তি ব্যবহার করতে পারেন object-fit।

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

স্নিপেট প্রসারিত করুন

এখানে উদাহরণ দেখুন

আই-এর জন্য একটি পলিফিল রয়েছে: https://github.com/anselmh/object-fit

— afonsoduarte
সূত্র

11

আকর্ষণীয় যে এটি imgট্যাগগুলির সাথেও করা যায় ( background-imageউপরের উত্তরে বর্ণিত পদ্ধতিটিই নয় )। ধন্যবাদ :)

— মাহদি গিয়াসি

44

এটিকে বিকল্প হিসাবে বিবেচনা করার সময়, মনে রাখবেন যে object-fit এটি অনেকগুলি ব্রাউজারে সমর্থিত নয় ।

— joshreejones

2

দুর্ভাগ্যক্রমে background-sizeআমার প্রকল্পগুলিতে খুব কমই একটি কার্যকর সমাধান। আপনি কোনও এসইও সুবিধা পাওয়ার সম্ভাবনা কম হচ্ছেন এবং চিত্রটি যেখানে আপনি পর্দার পাঠকদের জন্য অতিরিক্ত প্রসঙ্গ সরবরাহ করতে চাইতে পারেন সেখানে কোনও ALT ট্যাগ, ক্যাপশন ইত্যাদি সরবরাহ করতে পারবেন না।

— মার্কাস

3

এটি দুর্দান্ত, তবে কোনও IE সমর্থন নেই। পলিফিলগুলির কোনওটিই এখন আর কাজ করে না।

— জেক

3

শুধু ব্যবহার object-fit: cover;করে। অনেক অনেক ধন্যবাদ

— লুকা

67

উপরের উত্তরটি উপর উন্নত করুন @afonsoduarte ( স্বীকৃত উত্তর নয় ) ।
আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন

তিনটি পার্থক্য রয়েছে:

width:100%স্টাইল প্রদান ।
আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন এবং চিত্রটি সমস্ত উপলব্ধ প্রস্থকে প্রসারিত করতে চান তবে এটি সহায়ক ।
heightসম্পত্তিটি নির্দিষ্ট করে alচ্ছিক , আপনি এটি আপনার প্রয়োজন মতো অপসারণ / রাখতে পারেন
```
.cover {
   object-fit: cover;
   width: 100%;
   /*height: 300px;  optional, you can remove it, but in my case it was good */
}
```
যাইহোক, উপাদানটিতে বৈশিষ্ট্যগুলি heightএবং widthবৈশিষ্ট্যগুলি সরবরাহ করার দরকার নেই imageকারণ তারা স্টাইল দ্বারা ওভাররাইড হবে।
সুতরাং এটি কিছু লিখতে যথেষ্ট।
```
<img class="cover" src="url to img ..."  />
```

— হাকান ফস্টেক
সূত্র

1

ঠিক আমি খুঁজছেন ছিল কি.

— ফ্রেঞ্চিস ল্যান্টিয়ার

1

তোমার একটা চুম্বন দরকার!

— কিন ওয়াং

আইটেম-ফিট কি আই এর সাথে কাজ করে না?

— বিগকোড

1

এটি 2020, আমি মনে করি এটি IE ছেড়ে যাওয়ার জন্য ভাল সময়

— হাকান ফাস্টিক

56

একমাত্র আসল উপায় হ'ল আপনার চিত্রের চারপাশে একটি ধারক রাখুন এবং ব্যবহার করুন overflow:hidden:

এইচটিএমএল

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

সিএসএস

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

আপনি যা চান তা করতে সিএসএসে ব্যথা হয় এবং চিত্রটি কেন্দ্রীভূত করা হয়, জ্যাকুয়েরিতে দ্রুত সমাধান রয়েছে যেমন:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

— ডমিনিক সবুজ
সূত্র

1

ধন্যবাদ। এটি কাজ করেছে, তবে এটি শীর্ষে থেকে চিত্রটি ফসল করে । (এটি দেখুন: jsfiddle.net/x86Q7 ) কেন্দ্র থেকে চিত্র কাটার কোনও উপায় নেই ?

— মাহদী গিয়াসি

1

@ মাহদীগিয়াসী:। কনটেনার ইমগ সিএসএসে শীর্ষ এবং বাম বৈশিষ্ট্যগুলি পরিবর্তন করুন!

— আলী বেন মেসাউদ

margin-topউদাহরণস্বরূপ আমি চিত্রটি সেট করতে পারি 50px(এটি দেখুন: jsfiddle.net/x86Q7/1 ), তবে কীভাবে এটি আসল কেন্দ্র থেকে ক্রপ করবেন ? (JQuery ছাড়া?)

— মাহদি গিয়াসি

2

আহঃ দুঃখিত আপনার মন্তব্যটি দেখতে পেলেন না তবে আমি জ্যাকোয়ারিটি কেবল যুক্ত করলাম :)

— ডমিনিক গ্রিন

1

দুর্দান্ত সমাধান! আমার জন্য উলম্ব ভরাটটি অনুভূমিকের চেয়ে বেশি গুরুত্বপূর্ণ ছিল, সুতরাং আমাকে কেবল '.Container img' শ্রেণীর জন্য "প্রস্থ: 100%" "উচ্চতা: 100%" পরিবর্তন করতে হয়েছিল। ধন্যবাদ!

— '15

26

সিএসএস সমাধান কোনও জেএস এবং কোনও পটভূমি চিত্র নেই:

পদ্ধতি 1 "মার্জিন অটো" (আই 8 + - এফএফ নয়!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

স্নিপেট প্রসারিত করুন

http://jsfiddle.net/5xjr05dt/

পদ্ধতি 2 "রূপান্তর" (আই 9 +):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

স্নিপেট প্রসারিত করুন

http://jsfiddle.net/5xjr05dt/1/

পদ্ধতি 2 একটি নির্দিষ্ট প্রস্থ / উচ্চতার ধারকটিতে একটি চিত্রকে কেন্দ্র করতে ব্যবহার করা যেতে পারে। উভয়ই উপচে পড়তে পারে - এবং চিত্রটি ধারকের চেয়ে ছোট হলেও এটি কেন্দ্রিক হবে।

http://jsfiddle.net/5xjr05dt/3/

পদ্ধতি 3 "ডাবল আবরণ" (আই 8 + - এফএফ নয়!):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

স্নিপেট প্রসারিত করুন

http://jsfiddle.net/5xjr05dt/5/

পদ্ধতি 4 "ডাবল মোড়ক এবং ডাবল চিত্র" (IE8 +):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

স্নিপেট প্রসারিত করুন

http://jsfiddle.net/5xjr05dt/26/

পদ্ধতি 1 এর সামান্য উন্নত সমর্থন রয়েছে - আপনাকে চিত্রের প্রস্থ বা উচ্চতা নির্ধারণ করতে হবে!
উপসর্গ পদ্ধতি 2 এরও শালীন সমর্থন রয়েছে (ie9 পর্যন্ত) - পদ্ধতি 2 অপেরা মিনিতে কোনও সমর্থন দেয় না!
পদ্ধতি 3 টি দুটি মোড়ক ব্যবহার করে - প্রস্থ এবং উচ্চতাকে উপচে ফেলতে পারে।
পদ্ধতি 4 টি একটি ডাবল চিত্র ব্যবহার করে (স্থানধারক হিসাবে একটি) এটি কিছু অতিরিক্ত ব্যান্ডউইথ ওভারহেড দেয়, তবে আরও ভাল ক্রসব্রোজার সমর্থন।

1 এবং 3 পদ্ধতিটি ফায়ারফক্সের সাথে কাজ করছে বলে মনে হয় না

— জেটি হাটেনবোস
সূত্র

এটিই কেবলমাত্র বাস্তবে কাজ করে (মাইনাস জেএস সমাধান)। ধন্যবাদ!

— জেক

এটি উভয়ই উচ্চতা বা প্রস্থকে উপচে ফেলে সীমাবদ্ধ তবে একটি আকর্ষণীয় সমাধান।

— জেক 2

1

@ জ্যাক - উপরের পদ্ধতি 2 এর সাথে প্রস্থ এবং উচ্চতা উপচে পড়া সম্ভব - অতিরিক্ত আপডেটের সাথে আমার আপডেট হওয়া উত্তরটি দেখুন।

— জেটি হাটেনবোস

হ্যাঁ। এটি অবশ্যই একটি দুর্দান্ত উত্তর। আমি এর সাথে আরও কিছু বোকা বানাব। প্রতিক্রিয়াশীল হওয়া দরকার এর চেয়ে লম্বা চিত্রের চেয়ে প্রশস্ত চিত্রের জন্য এটি কিছুটা জটিল ছিল, তবে এর জন্য প্রচুর অ্যাপ্লিকেশন রয়েছে।

— জেক

1

@ জ্যাক - শীতল - আমি অনুভূমিক কেন্দ্রীকরণ করার জন্য একটি তৃতীয় পদ্ধতি পেয়েছি। উল্লম্ব কেন্দ্রীকরণ সমর্থন করার জন্য আমি এই পদ্ধতিটি প্রসারিত করেছি। আমি আমার সংযোজনটি উপরে 3 র্থ পদ্ধতি হিসাবে পোস্ট করব। দেখে মনে হচ্ছে এটি আই 7 + প্রুফ (এমনকি কমও সম্ভবত)। এখানে মূল উত্তর stackoverflow.com/questions/3300660/...

— জেটি Houtenbos

10

আরেকটি সমাধান হ'ল পছন্দসই প্রস্থ এবং উচ্চতা সহ চিত্রটিকে একটি পাত্রে রাখা। এই পদ্ধতিটি ব্যবহার করে আপনাকে কোনও উপাদানটির ব্যাকগ্রাউন্ড চিত্র হিসাবে চিত্রটি সেট করতে হবে না।

তারপরে আপনি কোনও imgট্যাগ দিয়ে এটি করতে পারেন এবং উপাদানটির উপরে সর্বাধিক প্রস্থ এবং সর্বাধিক উচ্চতা নির্ধারণ করতে পারেন ।

সিএসএস:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

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

এইচটিএমএল:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

এখন আপনি যখন ধারকটির আকার পরিবর্তন করবেন তখন সীমা ছাড়িয়ে বা বিকৃতি ছাড়াই চিত্রটি স্বয়ংক্রিয়ভাবে যত বড় হতে পারে grow

আপনি যদি চিত্রটি উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্র করতে চান তবে আপনি ধারক সিএসএস এ পরিবর্তন করতে পারেন:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

এখানে একটি জেএস ফিডল http://jsfiddle.net/9kUYC/2/

— earl3s
সূত্র

এটি সিএসএসের কভারের মতো নয়, যেখানে ফলস্বরূপ একটি মাত্রা সর্বদা 100% এর বাইরে (বা প্রান্তের ক্ষেত্রে সমান)

— মিরোশকো

না, এই সমাধানটি নিশ্চিত করে যে এটি কখনই 100% ছাড়িয়ে যায় না, যা প্রশ্নের অংশটিই ছিল। তারা আসল মাত্রা ছাড়িয়ে চিত্রটি বিকৃত বা বাড়তে চায় না।

— earl3s

3

প্রশ্নটি ছিল "কিভাবে পূরণ করতে হবে" পূর্ণ চিত্রের উদাহরণ সহ, যা স্পষ্টতই ক্রপড।

— মিরোস্কো

তবে আপনার যদি প্রতিক্রিয়াশীল হওয়ার জন্য চিত্রটির প্রয়োজন হয়? একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা নির্ধারণ কাজ করছে না isn't

— রিকার্ডো জিয়া

2

এটি আমার যা প্রয়োজন ছিল। ধন্যবাদ!

— নিকো রডসেভিচ

5

JQuery ব্যবহার করে @ ডমিনিক গ্রিনের উত্তর বন্ধ করে দেওয়া, এখানে এমন একটি সমাধান দেওয়া হয়েছে যা চিত্রগুলির জন্য কাজ করা উচিত যা তাদের প্রশস্তের চেয়ে উচ্চতর বা উচ্চতর images

http://jsfiddle.net/grZLR/4/

জাভাস্ক্রিপ্ট করার সম্ভবত আরও মার্জিত উপায় আছে তবে এটি কাজ করে।

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

— ramdog
সূত্র

5

CSS ব্যাকগ্রাউন্ড ব্যবহার করা হচ্ছে না
এটি ক্লিপ করতে কেবল 1 ডিভ
সঠিক দিক অনুপাত রাখার চেয়ে সর্বনিম্ন প্রস্থে পুনরায় আকার দেওয়া হয়েছে
কেন্দ্র থেকে ক্রপ করুন (উল্লম্ব এবং অনুভূমিকভাবে, আপনি এটি শীর্ষ, বাম এবং রূপান্তর দিয়ে সমন্বয় করতে পারেন)

আপনি কোনও থিম বা কিছু ব্যবহার করছেন তা সতর্ক থাকুন, তারা প্রায়শই 100% এ img সর্বোচ্চ-প্রস্থ ঘোষণা করে। আপনি কিছুই করতে হবে। এটি পরীক্ষা করে দেখুন :)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

— dmegatool
সূত্র

এই হল উত্তর আমি খুঁজছিলাম।

— মার্কোস বুয়ার্ক

এটি আমি দীর্ঘদিন ধরে করতে চেয়েছিলাম, আপনাকে ধন্যবাদ;)

— বস কোটিগা

4

আমি ফিলমোর নামে একটি জিকুয়েরি প্লাগইন তৈরিতে সহায়তা করেছি , যা background-size: coverএটি সমর্থনকারী ব্রাউজারগুলিতে পরিচালনা করে এবং যাঁরা তা করেন না তাদের জন্য শিম আছে। একবার দেখুন!

— আইডান ফিল্ডম্যান
সূত্র

4

আমি মনে করি এই উত্তরের জন্য বেশ দেরি হয়ে গেছে। যাইহোক আশা করি এটি ভবিষ্যতে কাউকে সহায়তা করবে। কার্ডগুলিকে কৌণিক অবস্থানে রেখে আমি সমস্যার মুখোমুখি হয়েছি। ইভেন্টের অ্যারে জন্য প্রদর্শিত কার্ড আছে। যদি ইভেন্টটির চিত্রের প্রস্থ কার্ডের জন্য বড় হয় তবে চিত্রটি দুটি পক্ষ থেকে ক্রপ করে এবং 100% উচ্চতার মাধ্যমে দেখানো উচিত। যদি চিত্রের উচ্চতা দীর্ঘ হয় তবে চিত্রগুলির নীচের অংশটি ক্রপ করা হয় এবং প্রস্থটি 100% হয়। এটির জন্য আমার খাঁটি সিএসএস সমাধান এখানে দেওয়া হল:

এইচটিএমএল:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

সিএসএস

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

— Nodirabegimxonoyim
সূত্র

আমি জানি না এটি কীভাবে কাজ করে তবে তা কাজ করে। আপনার স্প্যানটি একেবারে শীর্ষে রাখতে হবে: 0; ডান: 0; নীচে: 0; বাম: 0 এর মাত্রাটির তুলনায় তুলনামূলকভাবে অবস্থানযুক্ত পিতামাতার মধ্যে।

— মাইক

মতামত দেওয়ার জন্য আপনাকে ধন্যবাদ প্রিয় মাইক, এটি যদি সহায়ক হয় তবে আমি খুশি। আপনি কি আমার মন্তব্যটি দিয়ে উত্তরটি আপডেট করতে চান?

— নদিরাবেগিমক্সোনয়িম

3

এরকম কিছু চেষ্টা করুন: http://jsfiddle.net/D7E3E/4/

ওভারফ্লো সহ একটি ধারক ব্যবহার করা: লুকানো

সম্পাদনা: @ ডমিনিক গ্রিন আমাকে মারধর করেছে।

— woutr_be
সূত্র

ধন্যবাদ। এটি কাজ করেছে, তবে এটি শীর্ষে থেকে চিত্রটি ফসল করে । (এটি দেখুন: jsfiddle.net/x86Q7 ) কেন্দ্র থেকে চিত্র কাটার কোনও উপায় নেই ?

— মাহদী গিয়াসি

সিএসএসের চেয়ে বরং কঠিন হতে পারে, আমি jsfiddle.net/D7E3E/5

— woutr_be

হ্যাঁ, এটিকে সঠিকভাবে কেন্দ্র করে তোলার জন্য আপনার jQuery ব্যবহার করা উচিত, এটি অনেক সহজ হতে পারে।

— woutr_be

3

এটি চিত্রগুলি এটির প্রসারিত ছাড়াই বা ক্রপ ছাড়াই একটি নির্দিষ্ট আকারে পূরণ করবে

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

— মনোজ সেলভিন
সূত্র

2

পূর্ণস্ক্রিনে চিত্র ফিট করার জন্য এটি ব্যবহার করে দেখুন:

পটভূমি পুনরাবৃত্তি: বৃত্তাকার;

— suyash1798
সূত্র

0

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>

— user3181614
সূত্র

meta.stackoverflow.com/questions/300837/…

— sshashank124