107

আমার থাম্বনেল গ্যালারীটি কনফিগার করার জন্য আমি এখন কয়েক দিন ধরে চেষ্টা করছি যাতে সমস্ত চিত্র একই উচ্চতা এবং প্রস্থে উপস্থিত হয়। তবে আমি যখন সিএসএস কোড এ পরিবর্তন করি,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

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

আগাম ধন্যবাদ!

— Beaniie
সূত্র

184

এটি সিএসএস পুনরায় আকার দেওয়ার ক্ষেত্রে একটি পরিচিত সমস্যা, যদি না সমস্ত চিত্রের সমান অনুপাত হয়, আপনার কাছে সিএসএসের মাধ্যমে এটি করার কোনও উপায় নেই।

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

যদি চিত্রটির প্রস্থটি 100% প্রস্থে রাখতে বলার সময় কনটেইনারটির একটি নির্দিষ্ট মাত্রা থাকে (আমার উদাহরণে প্রস্থটি থাকে), এটি এটিকে ধারকটির পুরো প্রস্থ তৈরি করবে। autoউচ্চতা এ করতে হবে ইমেজ নতুন প্রস্থের সাথে উচ্চতা সমানুপাতিক আছে।

উদা:

এইচটিএমএল:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

সিএসএস:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

— jackJoe
সূত্র

41

আপনাকে এক দিক ঠিক করতে হবে (যেমন উচ্চতা) এবং অন্যটি সেট করতে হবে auto ।

যেমন

 height: 120px;
 width: auto;

এটি কেবল একদিকে ভিত্তি করে চিত্রটি স্কেল করবে। আপনি যদি চিত্রটি গ্রহণযোগ্য হিসাবে গ্রহণ করেন তবে আপনি কেবল সেট করতে পারেন

overflow: hidden;

অভিভাবক উপাদানটিতে, যা এমন কোনও কিছু কেটে ফেলবে যা অন্যথায় এর আকার ছাড়িয়ে যাবে।

— নিক আন্দ্রিওপুল্লস
সূত্র

আমি এটি চেষ্টা করেছি, তবে এটি এখনও আমাকে বিভিন্ন আকার এবং আকারের চিত্র দেয় আমি গ্যালারীটি

— একইরকম

2

উপরের উভয়ের সংমিশ্রণটি ব্যবহার করুন: একটি সংখ্যার উচ্চতা নির্ধারণ করুন (স্কেল রাখতে স্বয়ংক্রিয় প্রস্থের সাথে), এবং পিতামাতাকে একটি overflow: hiddenঅতিরিক্ত প্রস্থের জন্য নির্দিষ্ট প্রস্থে সীমাবদ্ধ করুন

— নিক অ্যান্ড্রিওপ্লোস

25

আপনি object-fitCSS3 সম্পত্তি ব্যবহার করতে পারেন , এর মতো কিছু

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

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

এটি ঠিক আপনার উত্তর নয়, যদিও এটি ধারকটি প্রসারিত করে না, তবে এটি গ্যালারীটির মতো আচরণ করে এবং আপনি imgনিজেই স্টাইলিং রাখতে পারেন ।

এই সমাধানের আর একটি অপূর্ণতা এখনও CSS3 সম্পত্তির দুর্বল সমর্থন। আরও বিশদ এখানে পাওয়া যায়: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ । jQuery সমাধান এছাড়াও পাওয়া যাবে।

— dmitry_romanov
সূত্র

ধন্যবাদ, সুন্দর সমাধান। :)

— বিভু

এটি কেবল অপেরা এটিমে সমর্থিত এমন কোনও সম্পত্তির সাথে উত্তর দেওয়ার পক্ষে কিদ্দ্বয়?! caniuse.com/object-fit

— সাইমন ড্রাগসবুক

4

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

— dmitry_romanov

1

বেশ কয়েক বছর পরে এই পৃষ্ঠায় আসার পরে আমি এই 'ভবিষ্যতের' উত্তরটি পেয়ে খুশি হয়েছি!

— পেটিজি

8

চিত্রগুলিকে সামঞ্জস্যযোগ্য / নমনীয় করতে আপনি এটি ব্যবহার করতে পারেন:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— স্তানিস্লাভ
সূত্র

5

এটি আপনার ধারক হিসাবে একটি পটভূমি হিসাবে রাখুন

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

এটি আপনার চিত্রটি কোনও 120x120 ডিভের অভ্যন্তরে চিত্রের কোনও অতিরিক্ত অংশ কেটে দেবে

— DickieBoy
সূত্র

2

আপনি যদি চিত্রটি প্রসারিত করতে না চান, এটি ওভারফ্লো ছাড়াই ডিভ কনটেয়ারে ফিট করুন এবং প্রয়োজনে মার্জিনটি সামঞ্জস্য করে এটি কেন্দ্র করুন।

চিত্রটি ক্রপ হবে না
দিক অনুপাতও একই থাকবে।

এইচটিএমএল:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

সিএসএস:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

— ভূষণ ডাঙ্গোর
সূত্র

0

transform: scale(0.5);

উদাহরণ:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

দেখুন: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— মাহমুদ কে।
সূত্র

-1

আপনি যদি স্পেক রেশিও জানেন তবে আপনি পার্থক্যের উপর নির্ভর করে হাইট সেট করতে শতাংশের সাথে প্যাডিং-বটম ব্যবহার করতে পারেন।

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— reco
সূত্র

সিএসএস ব্যবহার করে আনুপাতিকভাবে চিত্রের আকার পরিবর্তন করছেন?

এইচটিএমএল:

সিএসএস:

উদাহরণ: