আমি কোনও চিত্রকে আনুপাতিক রাখার সাথে কীভাবে পূরণ করতে পারি?

Question

আমি এই থ্রেডটি পেয়েছি - চিত্রের দিকটি-অনুপাত রেখে আপনি <div> ভরাতে কোনও চিত্র কীভাবে প্রসারিত করবেন? - এটি সম্পূর্ণরূপে আমি চাই তা নয়।

আমার একটি ডিভ রয়েছে যার একটি নির্দিষ্ট আকার এবং এর ভিতরে একটি চিত্র রয়েছে। আমি চিত্রটি ল্যান্ডস্কেপ বা প্রতিকৃতি হিসাবে বিবেচনা না করেই সবসময় ডিভিটি পূরণ করতে চাই । এবং চিত্রটি কাট-অফ (ডিভ নিজেই ওভারফ্লো লুকিয়ে আছে) তা বিবেচনা করে না।

তাই আপনি যদি ইমেজ প্রতিকৃতি হয় আমি চাই widthহতে 100%এবং height:autoতাই এটি অনুপাতে থাকে। আমি চান ইমেজ ভূদৃশ্য হয় heightহতে 100%এবং width to beauto`। জটিল মনে হচ্ছে?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

যেহেতু আমি কীভাবে এটি করতে জানি না আমি কেবল তার অর্থের একটি দ্রুত চিত্র তৈরি করেছি। এমনকি আমি এটি সঠিকভাবে বর্ণনা করতে পারি না।

সুতরাং, আমি অনুমান করি যে আমি এই প্রথম জিজ্ঞাসা করছি না। তবে আমি সত্যিই এর কোনও সমাধান খুঁজে পাইনি। এটি করার কিছু নতুন সিএসএস 3 উপায় আছে - আমি ফ্লেক্স-বাক্সের কথা ভাবছি। কোন ধারণা? আমি এটি আশা করি তার চেয়েও সহজ?

Comments

আপনি যখন এখনও জাভাস্ক্রিপ্ট দিয়ে সহজেই এটি করতে পারেন তবে কেন আপনি সিএসএস 3 ব্যবহার করতে চান?

— Js

স্বাক্ষরিত তবে আপনি কি সর্বনিম্ন উচ্চতা এবং ন্যূনতম প্রস্থকে 100% এ সেট করতে চেষ্টা করতে পারেন? এটি কমপক্ষে বাক্সটি পূরণ করে আনুপাতিকভাবে রাখতে হবে

— ক্রিসবুলার

Answer 1

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

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

জেএসফিডেল এখানে

আমি এটি IE9, ক্রোম 31 এবং অপেরা 18-এ সফলভাবে পরীক্ষা করেছি But তবে অন্য কোনও ব্রাউজার পরীক্ষা করা হয়নি। সর্বদা হিসাবে আপনার অবশ্যই আপনার বিশেষ সহায়তা প্রয়োজনীয়তা বিবেচনা করতে হবে।

Comments

আইই 9-তে চিত্রটি এই পদ্ধতির সাথে উল্লম্ব বা অনুভূমিকভাবে কেন্দ্রিক নয়, এটি শীর্ষে এবং বামে প্রান্তিক করা হয়েছে। i59.tinypic.com/ouo77s.png

— মাইক

এটি আইপ্যাডে একটি সমস্যা রয়েছে, এটি সাফারি চিত্রটি এর উচ্চতার 100% পর্যন্ত প্রসারিত করে তবে ন্যূনতম প্রস্থের সম্পত্তি ধরে রাখে না।

— শান

এটি ছোট চিত্রগুলি পূরণ করার জন্য স্কেল করে বলে মনে হচ্ছে তবে এটি ফিট হবে না। কমপক্ষে আমি যখন একটি বড় চিত্র ব্যবহার করি তখন এটি কেবলমাত্র একটি ছোট অংশ দেখায়।

— Johncl

একটি বিশাল চিত্র ফিট করার জন্য, আমি ছবিটিতে নিম্নলিখিতটি ব্যবহার করেছি:.fill img { min-height:100%; min-width: 100%; object-fit: cover; }

— পিটার জি

সুপার হিরো! : ডি

— গারিস এম সুয়েরো

Answer 2

এটি কিছুটা দেরি হয়ে গেছে তবে আমার ঠিক একই সমস্যা হয়েছিল এবং শেষ পর্যন্ত এটি অন্য স্ট্যাকওভারফ্লো পোস্টের ( https://stackoverflow.com/a/29103071 ) সহায়তায় সমাধান করা হয়েছে ।

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

আশা করি এটি এখনও কাউকে সহায়তা করে।

পিএস: সর্বাধিক উচ্চতা , সর্বাধিক প্রস্থ , ন্যূনতম প্রস্থ এবং নূন্যতম-উচ্চতা সিএসএস বৈশিষ্ট্যগুলির সাথে একসাথে কাজ করে । ধারক বা পুরো ব্রাউজার উইন্ডোটি পূরণ করতে এটি 100% বা 100vh / 100vw এর মতো দৈর্ঘ্য ইউনিট ব্যবহার করে স্পষ্টতই কার্যকর ।

Comments

এটি কি ক্রসব্রোজার সমাধান?

— ক্যান্ডেলজ্যাক

অবজেক্ট-ফিট: কভার; দুর্দান্ত কাজ! : ব্রাউজার তথ্য (আই ই কাজ করে না) css-tricks.com/almanac/properties/o/object-fit ইন্টারনেট জন্য ফলব্যাক সমাধান: medium.com/@primozcigler/... : মাইক্রোসফট এটা বাস্তবায়নের কাজ করছে developer.microsoft.com / এন-ইউএস / মাইক্রোসফ্ট-এজ / প্ল্যাটফর্ম / স্ট্যাটাস / ...

— কাহ

আমার ধারণা object-positionএই শ্রেণিতে একটি বিধি যুক্ত করা এখানে সহায়ক হবে। শুধু একটি পার্শ্ব নোট।

— তাহা পাকসু

Answer 3

একটি পুরানো প্রশ্ন তবে একটি উপায় রয়েছে এখন যেমন একটি উপায় রয়েছে।

সঠিক সিএসএস ভিত্তিক উত্তরটি ব্যবহার করা object-fit: cover, যা কাজ করে background-size: cover। অবস্থান নির্ধারণের ক্ষেত্রে object-positionগুণাবলীর দ্বারা যত্ন নেওয়া হবে , যা কেন্দ্রিককরণের ক্ষেত্রে পূর্বনির্ধারিত।

তবে কোনও আইই / এজ ব্রাউজারে বা অ্যান্ড্রয়েড <4.4.4 এ এর ​​জন্য সমর্থন নেই। এছাড়াও, object-positionসাফারি, আইওএস বা ওএসএক্স সমর্থিত নয়। পলিফিলের অস্তিত্ব রয়েছে, অবজেক্ট-ফিট-ইমেজগুলি সেরা সমর্থন দেয় বলে মনে হচ্ছে।

সম্পত্তি কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য, ব্যাখ্যা এবং ডেমো সম্পর্কিত CSS ট্রিকস নিবন্ধটিobject-fit দেখুন ।

Answer 4

এটি করা উচিত:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Comments

আমার জন্য বেশ ভাল কাজ করে, আমার ক্ষেত্রে আমার কেবলমাত্র অবস্থান যুক্ত করতে হবে: নিখুঁত এবং শীর্ষ: 0, এবং কিছু জেড-সূচকও

— বায়ারনক্রোরালস

Answer 5

নীচের সমস্ত উত্তরগুলির নির্দিষ্ট প্রস্থ এবং উচ্চতা রয়েছে যা সমাধানটিকে "প্রতিক্রিয়াশীল নয়" করে তোলে।

ফলাফল অর্জন করতে তবে চিত্রটি প্রতিক্রিয়াশীল রাখতে আমি নিম্নলিখিত ব্যবহার করেছি:

1. ধারকটির অভ্যন্তরে কাঙ্ক্ষিত অনুপাত সহ স্বচ্ছ জিআইফ চিত্র রাখুন
2. আপনি আকার পরিবর্তন করতে এবং ক্রপ করতে চান এমন চিত্র সহ একটি চিত্র ট্যাগ ইনলাইন সিএসএস ব্যাকগ্রাউন্ড দিন

এইচটিএমএল:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Comments

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

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

Answer 6

আপনি সিএসএস ফ্লেক্স বৈশিষ্ট্য ব্যবহার করে এটি অর্জন করতে পারেন। নীচের কোডটি দেখুন

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Comments

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

— চিওয়দা 15'19

Answer 7

background-size: coverএর সাথে মিলে (IE9 +) ব্যবহার বিবেচনা করুন background-image। আইই 8- এর জন্য একটি পলিফিল রয়েছে ।

Comments

এর জন্য কি ব্যাকগ্রাউন্ড-ইউআরএল লাগবে না? আপনি আরও বিস্তারিত বলতে পারেন? এই প্রশ্নে বর্ণিত হিসাবে <img src = "" /> দিয়ে কাজ করা যাবে?

— হার্সিমরানব

@ হার্সিমরানব অবশ্যই নির্দিষ্টভাবে background-sizeবোধগম্য হয়ে উঠেছে background-image(আমি আমার উত্তরটি সে অনুযায়ী আপডেট করেছি)। এটি IMGউপাদানগুলির জন্য প্রযোজ্য নয় ।

— মারাত তানালিন

এটি সেরা উত্তর। এটি সহজ এবং ব্রাউজারের ভাল সমর্থন রয়েছে। অন্যান্য সমস্ত সমাধানগুলি হয় খুব জটিল বা আইই (9) এ কাজ করছে না।

— JoostS

Answer 8

এটা চেষ্টা কর:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

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

Answer 9

এটি অর্জনের জন্য আপনি ডিভ ব্যবহার করতে পারেন। আইএমজি ট্যাগ ছাড়াই :) আশা করি এটি সাহায্য করবে।

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

Answer 10

আমি বর্ণিত "সেরা কেস" দৃশ্যের একমাত্র উপায়ে চিত্রটি পটভূমি হিসাবে রাখছিলাম:

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

.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%;
}​

Answer 11

আইই ব্যবহার করে সমর্থন সহ একটি উত্তর এখানে ব্যবহার করা হয়েছে object-fitযাতে আপনি অনুপাত হারাবেন না

object-fitসমর্থনযোগ্য কিনা তা সনাক্ত করতে একটি সাধারণ জেএস স্নিপেট ব্যবহার করে এবং এর imgজন্য এর জন্য প্রতিস্থাপন করুনsvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

---

দ্রষ্টব্য: সেখানে কয়েকটি object-fitপলিফিলও রয়েছে যা object-fitকাজ করবে ।

এখানে কিছু উদাহরণ আছে:

• অবজেক্ট হইয়া-চিত্র
• কনস্ট্যান্সচেন / অবজেক্ট-ফিট-পলিফিল
• সিএসএস অবজেক্ট-ফিট সম্পত্তি জন্য পলিফিল

Answer 12

এখানে আপনি আমার কাজের উদাহরণ আছে। আমি এমন একটি কৌশল ব্যবহার করেছি যা চিত্রটি ডিভ কনটেয়ারের ব্যাকগ্রাউন্ড-আকারের সাথে ব্যাকগ্রাউন্ড হিসাবে সেট করছে: কভার এবং পটভূমি অবস্থান: কেন্দ্র কেন্দ্র

আমি চিত্রটি প্রস্থ: 100% এবং অস্বচ্ছতা: 0 দিয়ে অদৃশ্য করে রেখেছি। নোট করুন যে আমি আমার চিত্রটি দেখছি কারণ কেবলমাত্র বাচ্চার ক্লিক ইভেন্টে আমার বিশেষ আগ্রহ রয়েছে।

দয়া করে মনে রাখবেন যে উত্সাহিত আমি কৌনিকটি ব্যবহার করছি এটি সম্পূর্ণ অপ্রাসঙ্গিক।

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

ফলাফলটি হ'ল আপনি যেটিকে সব ক্ষেত্রে অনুকূল হিসাবে সংজ্ঞায়িত করেন

Answer 13

সিএসএস object-fit: coverএবং object-position: left centerসম্পত্তি মানগুলি এখন এই সমস্যাটির সমাধান করে।

Answer 14

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

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

Answer 15

কেবলমাত্র চিত্রটির উচ্চতা ঠিক করুন এবং প্রস্থ = অটো সরবরাহ করুন

img{
    height: 95vh;
    width: auto;
}