এইচটিএমএল আইএমজি স্কেলিং


114

আমি এইচটিএমএল ইমগ ট্যাগ সহ কয়েকটি বড় চিত্র প্রদর্শন করার চেষ্টা করছি। এই মুহুর্তে তারা পর্দার প্রান্ত থেকে চলে যায়; ব্রাউজার উইন্ডোতে থাকার জন্য আমি কীভাবে তাদের স্কেল করতে পারি?

অথবা সম্ভাব্য ইভেন্টে এটি সম্ভব নয়, এটি কি কমপক্ষে "এই চিত্রটির স্বাভাবিক প্রস্থ এবং উচ্চতার 50% অংশে প্রদর্শিত" বলা সম্ভব?

প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি চিত্রটিকে বিকৃত করে - আমি যতদূর বলতে পারি এটি হ'ল কারণ তারা ধারকটির যে কোনও বৈশিষ্ট্য শেষ হতে পারে তা উল্লেখ করে যা চিত্রের সাথে সম্পর্কিত নয়। আমি পিক্সেল নির্দিষ্ট করতে পারি না কারণ আমাকে প্রতিটি পৃথক পিক্সেল আকারের চিত্রের বৃহত সংগ্রহের সাথে ডিল করতে হয়। সর্বাধিক প্রস্থ কাজ করে না।


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

1
রোললেস, আপনি। নেট বা পিএইচপি বা খাঁটি এইচটিএমএল ছাড়া অন্য কিছু ব্যবহার করছেন?
ডোরজান

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

উত্তর:


135

কেবলমাত্র সেট করুন widthবা heightএটি স্বয়ংক্রিয়ভাবে অন্যটিকে স্কেল করবে। এবং হ্যাঁ আপনি একটি শতাংশ ব্যবহার করতে পারেন।

প্রথম অংশটি সম্পন্ন করা যেতে পারে তবে জাভাস্ক্রিপ্টের প্রয়োজন, তাই সম্ভবত সমস্ত ব্যবহারকারীর পক্ষে কাজ না করে।


7
দয়া করে, দয়া করে দয়া করে নোট করুন যে বিশাল চিত্রগুলিতে এটি করার ফলে দীর্ঘ পৃষ্ঠাগুলির জন্য দীর্ঘ ডাউনলোডের সময় আসবে যা দীর্ঘ ডাউনলোডের সময় না থাকা উচিত। সম্ভব হলে চিত্রটির পুনরায় আকার দেওয়া আরও সবসময় ভাল।
ceejayoz

ধন্যবাদ! এটি কেবলমাত্র প্রস্থটি সেট করার আপনার সমাধানটি কেবল সঠিক স্কেলিংয়ের জন্যই কাজ করে না, তবে প্রস্থটি কেবলমাত্র 100% এ সেট করে প্রথম অংশটি করে।
wal

2
@ সিজেজোজ আমি সম্মত, কিন্তু তিনি যা চাইছেন তা তা নয়।
রিডলারডেভ

@ সিজেজোজ আমি ভাবছি, কেন বেশি সময় লাগে? যখন এটি উভয় পরিস্থিতির জন্য প্রদর্শিত হয় তখন এটির আকার পরিবর্তন করতে হবে না? বা আপনি কি বলছেন যে আসল চিত্রটিকে ম্যানুয়ালি আকার দিন এবং ফাইলটি পরিবর্তন করুন?
আব্দুল

2
@ আবদুল আমি বলছি যে আপনার ওয়েবসাইটের 100x100 পিক্সেল স্লটে একটি 3,000x3,000 পিক্সেল 5 এমবি চিত্র ব্যবহার করা উচিত নয়।
ceejayoz


9

আমি জানি যে এই প্রশ্নটি দীর্ঘ সময়ের জন্য জিজ্ঞাসা করা হয়েছিল তবে আজকের একটি সহজ উত্তর হল:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

এখানে ভিডাব্লু এর ব্যবহার জানায় যে প্রস্থটি ভিউপোর্টের প্রস্থের 55% প্রস্থের সাথে তুলনামূলক।

আজকাল সমস্ত বড় ব্রাউজার এটিকে সমর্থন করে।

এই লিঙ্কটি পরীক্ষা করুন


1
vwআমার জন্য একটি জীবনকাল ছিল, অন্য পদ্ধতিগুলি হাতে থাকা চিত্রটির জন্য কাজ করে না।
cram

6

কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই।

আই 6 ইন্টারনেট এক্সপ্লোরার 6

শতাংশ কেবল একটি উপাদানের প্রস্থের জন্য height:100%;কাজ করে , তবে সঠিক কোড ব্যতীত কাজ করে না।

সিএসএস

html, body { height:100%; } 

তারপরে শতাংশ শতাংশ সঠিকভাবে কাজ করে এবং গতিশীলভাবে উইন্ডো রাইজাইজে আপডেট হয়।

<img src="image.jpg" style="height:80%;">

ব্রাউজারের উইন্ডোর আকার পরিবর্তিত হওয়ার সাথে আপনার আনুপাতিকভাবে প্রস্থের গুণাবলী প্রয়োজন নেই the

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

img { -ms-interpolation-mode: bicubic; }

প্রপসগুলি এই উত্সটিতে যান: চূড়ান্ত আই 66 চিটশিট: 25+ ইন্টারনেট এক্সপ্লোরার 6 বাগগুলি কীভাবে ঠিক করতে হবে



2

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


0

আমি কীভাবে এটি করতে পারি তা সবচেয়ে ভাল উপায় হ'ল:

1) ওভারফ্লোটি স্ক্রোলে সেট করুন এবং সেভাবে চিত্রটি থাকবে তবে আপনি এটি পরিবর্তে দেখতে স্ক্রোল করতে পারেন

2) একটি ছোট চিত্র আপলোড করুন। আপলোড করার সময় এখন প্রচুর প্রোগ্রাম রয়েছে (এই বিটিডব্লিউটি করার জন্য আপনার পিএইচপি বা। নেট এর মতো কিছু দরকার হবে) আপনার এটির অটো স্কেল থাকতে পারে।

3) এটির সাথে বসবাস করা এবং প্রস্থ এবং উচ্চতা নির্ধারণ করা এটি এটিকে বিকৃত দেখায় তবে সঠিক আকারের ফলস্বরূপ এখনও ব্যবহারকারীকে পূর্ণ আকারের চিত্র ডাউনলোড করতে হবে।

শুভকামনা!

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.