আইই 6 তে একটি (সিএসএস) মাত্রা ব্যবহার করে চিত্রকে স্কেল করার সময় কীভাবে অনুপাতের অনুপাত সংরক্ষণ করবেন?

Question 1

সমস্যা এখানে। আমার একটি চিত্র আছে:

<img alt="alttext" src="filename.jpg"/>

নোট কোনও উচ্চতা বা প্রস্থ নির্দিষ্ট করা হয়নি।

নির্দিষ্ট পৃষ্ঠাগুলিতে আমি কেবল একটি থাম্বনেইল প্রদর্শন করতে চাই। আমি এইচটিএমএল পরিবর্তন করতে পারি না, তাই আমি নিম্নলিখিত সিএসএস ব্যবহার করি:

.blog_list div.postbody img { width:75px; }

যা (বেশিরভাগ ব্রাউজারগুলিতে) সংরক্ষিত দিক অনুপাত সহ সমস্ত অভিন্ন থাম্বনেইলগুলির একটি পৃষ্ঠা তৈরি করে।

আই আই In তে যদিও চিত্রটি কেবলমাত্র সিএসএসে নির্দিষ্ট মাত্রায় স্কেল করা হবে। এটি 'প্রাকৃতিক' উচ্চতা ধরে রাখে।

সমস্যাগুলির চিত্র তুলে ধরে এমন এক জোড়া পৃষ্ঠার উদাহরণ এখানে:

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

সম্পাদনা: চিত্রগুলি বিভিন্ন আকার এবং দিক অনুপাতের উল্লেখ করা উচিত।

Question 2

অ্যাডাম লুটার আমাকে এর জন্য ধারণাটি দিয়েছিলেন তবে এটি আসলেই খুব সহজ বলে প্রমাণিত হয়েছিল:

img {
  width:  75px;
  height: auto;
}

আই 66 এখন চিত্রটিকে সূক্ষ্মভাবে স্কেল করে এবং অন্য ব্রাউজারগুলি ডিফল্টরূপে এটি ব্যবহার করে বলে মনে হয়।

যদিও উভয় উত্তরের জন্য ধন্যবাদ!

Question 3

আমি আনন্দিত যে এটি কার্যকর হয়েছে, সুতরাং আমি অনুমান করি যে আপনি অন্যান্য ব্রাউজারগুলির নকল করার জন্য আপনাকে স্পষ্টভাবে আই 6 এ 'অটো' সেট করতে হবে!

আমি সম্প্রতি চিত্রগুলি স্কেল করার জন্য আবার একটি কৌশল খুঁজে পেয়েছি, যা আবার ব্যাকগ্রাউন্ডের জন্য ডিজাইন করা হয়েছে। এই কৌশলটির কিছু আকর্ষণীয় বৈশিষ্ট্য রয়েছে:

চিত্রের অনুপাতটি সংরক্ষিত আছে
চিত্রটির মূল আকারটি বজায় রাখা হয়েছে (এটি কেবল কখনও বাড়তে সঙ্কুচিত হতে পারে না)

মার্কআপ একটি মোড়কের উপাদানটির উপর নির্ভর করে:

<div id="wrap"><img src="test.png" /></div>

উপরের মার্কআপটি দেওয়া পরে আপনি এই নিয়মগুলি ব্যবহার করুন:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

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

স্পষ্ট করে বলতে, নীচের বেস স্টেটটি বিবেচনা করুন: একটি ধারক যা 100x100 এবং একটি চিত্র যা 10x10। ফলাফলটি 100x100 এর একটি ছোট আকারের চিত্র।

বেস স্টেট থেকে শুরু করে, ধারকটি 20x100 আকারে পরিবর্তন করেছে, চিত্রটি 100x100 এ পুনরায় আকার দেওয়া হয়েছে।
বেস স্টেট থেকে শুরু করে চিত্রটি 10x20 এ পরিবর্তন করা হয়েছে, চিত্রটি 100x200 এ আকার দেয়।

সুতরাং, অন্য কথায়, চিত্রটি সর্বদা পাত্রে কমপক্ষে বড় তবে এটির অনুপাত বজায় রাখতে এটি ছাড়িয়ে স্কেল হবে ।

এটি সম্ভবত আপনার সাইটের জন্য কার্যকর নয় এবং এটি আই 6-তে কাজ করে না। তবে, আপনার ভিউ পোর্ট বা ধারকটির জন্য একটি ছোট আকারের ব্যাকগ্রাউন্ড পাওয়া দরকারী।

Question 4

ঠিক আছে, আমি এমন সিএসএস হ্যাকের কথা ভাবতে পারি যা এই সমস্যাটি সমাধান করবে।

আপনি আপনার সিএসএস ফাইলে নিম্নলিখিত লাইনটি যুক্ত করতে পারেন:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; }

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

Question 5

সিএসএসে সুস্পষ্ট স্কেলিংয়ের একমাত্র উপায় হ'ল এখানে যেমন কৌশল খুঁজে পাওয়া যায় ।

কেবলমাত্র আই you , আপনি ফিল্টারও ব্যবহার করতে পারেন ( পিএনজিএফিক্স পরীক্ষা করে দেখুন )। তবে সেগুলিকে পৃষ্ঠায় স্বয়ংক্রিয়ভাবে প্রয়োগ করার জন্য জাভাস্ক্রিপ্টের প্রয়োজন হবে, যদিও জাভাস্ক্রিপ্টটি CSS ফাইলে এম্বেড করা যেতে পারে।

যদি আপনার জাভাস্ক্রিপ্টের প্রয়োজন হয়, তবে আপনার সামগ্রীটি লোড হয়ে যাওয়ার পরে আপনি জাভাস্ক্রিপ্টটি উচ্চতার জন্য অনুপস্থিত মানটি পূরণ করতে চাইতে পারেন once (দুঃখিত এই কৌশলটির জন্য আমার কাছে কোনও রেফারেন্স নেই)।

অবশেষে, এবং এই সাবানবক্সের জন্য আমাকে ক্ষমা করুন, আপনি এই বিষয়ে আই 6 সমর্থন সমর্থন বোধ করতে পারেন। আপনি _width: autoআপনার width: 75pxনিয়মের পরে যুক্ত করতে পারেন , যাতে আই 6 কমপক্ষে চিত্রটি যথাযথভাবে রেন্ডার করে, এটি ভুল আকার হলেও।

আমি শেষ সমাধানটি কেবলমাত্র সুপারিশ করছি কারণ আই 6 out বেরিয়ে আসছে: 20% এবং মাসে প্রায় এক শতাংশ কমছে । এছাড়াও, আমি নোট করি যে আপনার সাইটটি বিনোদনমূলক এবং যুক্তরাজ্যে। এই উভয়ই জনসংখ্যার প্রতি ঝোঁক আইআই from থেকে দূরে রাখতে সহায়তা করে: আই 6 এর ব্যবহার সাপ্তাহিক ছুটির সময় প্রায় 40% হ্রাস পায় (কোন উদ্ধৃত প্রতিশ্রুতি নেই), এবং যুক্তরাজ্যের তুলনায় আইআই 6 এর চেয়ে অনেক কম জনসংখ্যক (আবার কোনও উদ্ধৃতি নেই, দুঃখিত) রয়েছে।

শুভকামনা!