এইচটিএমএল আইএমজি ট্যাগ ব্যবহার করে কীভাবে অনুপাত বজায় রাখা যায়

Question

আমরা আমাদের অ্যাপ্লিকেশনটিতে কোনও ফটো দেখানোর জন্য এইচটিএমএল-এর একটি ইমগ ট্যাগ ব্যবহার করছি। আমি এর উচ্চতা এবং প্রস্থ উভয়ই 64৪ টি বৈশিষ্ট্য নির্ধারণ করেছি I তবে একটি ইমগ ট্যাগের উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলি 64 এ সেট করে, এটি দিক অনুপাত বজায় রাখে না, তাই চিত্রটি বিকৃত দেখাচ্ছে looks

আপনার রেফারেন্সের জন্য আমার সঠিক কোডটি হ'ল:

<img src="Runtime Path to photo" border="1" height="64" width="64">

Comments

এইচটিএমএল / আইইয়ের

— জোনাথন রেইনার্ট

ক্রিদাম, আমি যখন এই প্রশ্নটি জিজ্ঞাসা করেছি তখন অনেক দিন। আমি এই সংস্থার যেখানে আমি এই সমস্যাটির জন্য কাজ করেছিলাম সেখানে রেখে এসেছি। আমি প্রস্তাবিত সমাধানগুলি চেষ্টা করতে পারিনি কারণ আমি সেই সময়ের সময়সীমা পূরণের জন্য অন্যান্য অগ্রাধিকার নিয়ে কাজ করছি। আমি এটিতে আরও অগ্রগতি করার সুযোগ পেতে পারি না।

— সুনীল কুমার

Answer 1

উচ্চতা এবং প্রস্থ নির্ধারণ করবেন না। এক বা অন্যটি ব্যবহার করুন এবং সঠিক দিক অনুপাত বজায় থাকবে।

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}

<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />

Comments

... তবে আপনি যদি উচ্চতা এবং প্রস্থ উভয়ই ঠিক করতে চান?

— ফতুহোকু

এটি গতিশীল অ্যাপ্লিকেশনগুলির জন্য কোনও ধারণা রাখে না। প্রস্থ বা উচ্চতা 64px এ হবে কিনা তা জানা যায়নি, কারণ এটি চিত্রের অনুপাতের উপর নির্ভর করে। কেন এই upvated প্রতিক্রিয়া?

— কোনেনসবার্গ

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

— টার্নিপ

আকারটি নির্দিষ্ট করা হয়েছে, দিক অনুপাতটি নয়, কারণ প্রশ্নটি কোনও রেজোলিউশনের কোনও চিত্র সম্পর্কে বিশেষত ছিল । 64x64 এর চেয়ে কম রেজোলিউশন সহ।

— কোনেনসবার্গ 31:18

Answer 2

এখানে নমুনা এক

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

Comments

এই সমাধানটি ব্যবহার করতে চান এমন লোকদের জন্য কেবল একটি নোট: অবজেক্ট-ফিট ব্রাউজারগুলির দ্বারা খুব ভাল সমর্থিত নয়। এটি মোটামুটি আইই বা এজ দ্বারা সমর্থিত নয়। উত্স: caniuse.com/#feat=object-fit

— শান ডসন

এখন এজ 16+ এ সমর্থিত, টেবিলটি দেখুন: w3schools.com/css/css3_object-fit.asp

— এডি আর

Answer 3

চিত্রগুলি সেট করুন widthএবং এতে রাখুন , তবে উভয়ই সীমাবদ্ধ করুন এবং :heightautomax-widthmax-height

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

বেহালা

আপনি 64x64px "ফ্রেম" -এ নির্বিচারে আকারের চিত্রগুলি প্রদর্শনের জন্য চান, আপনি তাদের জন্য ইনলাইন-ব্লক চাদরে এবং পজিশনিং ব্যবহার করতে পারেন, মত এই বেহালার মধ্যে ।

Comments

মূল আকারের বাইরে স্কেল করবে না, কেবলমাত্র মূল আকারের নীচে।

— কোনেনসবার্গ

Answer 4

<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

Comments

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

— ডিভাইস 1

এছাড়াও সেট widthএবং heightকরতে auto।

— মাহমুদভিসি

উচ্চতা এবং প্রস্থ উভয়ই সীমাবদ্ধতার সঠিক সমাধান।

— পবন কুমার

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

— কোনেনসবার্গ

Answer 5

তালিকাভুক্ত কোনও পদ্ধতিই ইমেজটিকে বৃহত্তম সম্ভাব্য আকারে স্কেল করে না যা কাঙ্ক্ষিত দিক অনুপাত বজায় রেখে একটি বাক্সে ফিট করে fits

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

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

Comments

হ্যাঁ. ট্যাগ style="background: url('_'); background-size: cover width:_px height:_px"জন্য ব্যবহার করুন <img>।

— উজ্জ্বল সিং

ধন্যবাদ, @ উজ্জ্বলসিংহ। প্রকৃতপক্ষে, আমাদের সর্বোচ্চ আকারের চিত্রের আকার বাড়ানোর দরকার coverনেই contain। contain"লেটারবক্সিং" বাড়ে

— অর্টউইন জেন্টজ

Answer 6

object-fit: containএইচটিএমএল এর সিএসএস এ বৈশিষ্ট্য ব্যবহার করুন img।

Answer 7

divমাত্রা x৪x64৪ এর সাথে চিত্রটি মোড়ানো এবং চিত্রটিতে সেট width: inheritকরুন:

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

Answer 8

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

উদাহরণ:

       image {
       width: 64px;
       height: 64px;
       }

Answer 9

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

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

অবজেক্ট-ফিট = "কভার" যোগ করা চিত্র অনুপাতটি অনুপাত না হারিয়ে স্থান গ্রহণ করতে বাধ্য করবে।