TLDR;
কোনও চিত্র যুক্ত করতে এবং কেন্দ্রীভূত করতে এই এইচটিএমএল / সিএসএস ব্যবহার করুন এবং আপনার মার্কডাউন ফাইলের মধ্যে স্ক্রিন স্পেসের প্রস্থের এর আকার 60% এ সেট করুন যা সাধারণত ভাল শুরু করার মান হয়:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
widthসিএসএসের মানটি আপনি চান শতাংশে পরিবর্তন করুন , বা মার্কডাউন ডিফল্ট আকারটি ব্যবহার করতে এটি পুরোপুরি সরিয়ে ফেলুন, যা আমি মনে করি যদি চিত্রটি পর্দার চেয়ে বড় হয় তবে এটি অন্যথায় প্রকৃত চিত্রের প্রস্থ হয় screen
সম্পন্ন!
অথবা, আরও অনেক তথ্যের জন্য পড়তে থাকুন।
এখানে বিভিন্ন HTML এবং CSS বিকল্প রয়েছে যা মার্কডাউন ফাইলগুলির মধ্যে পুরোপুরি কাজ করে:
1. আপনার মার্কডাউন ফাইলটিতে সমস্ত চিত্র কেন্দ্র এবং কনফিগার করুন (পুনরায় আকার দিন):
কেবলমাত্র এটি অনুলিপি করুন এবং আপনার চিহ্নডাউন ফাইলটির শীর্ষে ফাইলটির সমস্ত চিত্রকে কেন্দ্র করে পুনরায় আকার দিন এবং তারপরে (কেবলমাত্র সাধারণ মার্কডাউন সিনট্যাক্সের সাহায্যে আপনার ইমেজগুলি সন্নিবেশ করুন):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
বা, এখানে উপরের মত একই কোড তবে কী চলছে তা বোঝাতে বিশদ এইচটিএমএল এবং সিএসএস মন্তব্য সহ:
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
এখন, আপনি মার্কডাউন ব্যবহার করে কোনও চিত্র প্রবেশ করান কিনা:
বা আপনার মার্কডাউন ফাইলটিতে এইচটিএমএল:
<img src="https://i.stack.imgur.com/RJj4x.png">
... এটি উপরের এইচটিএমএল এবং সিএসএসের মধ্যে দেওয়া মন্তব্যে বর্ণিত হিসাবে এটি স্বয়ংক্রিয়ভাবে স্ক্রিনভিউ প্রস্থের 60% কেন্দ্রিক এবং আকারযুক্ত হবে। (অবশ্যই %০% আকারটি খুব সহজেই পরিবর্তনযোগ্য এবং আমি এটি চিত্রের দ্বারা চিত্রের ভিত্তিতেও করার সহজ উপায়গুলি উপস্থাপন করি)।
২. সময়ে সময়ে কেস কেস ভিত্তিতে চিত্রগুলি কেন্দ্র করে এবং কনফিগার করুন:
আপনি উপরের <style>ব্লকটি আপনার মার্কডাউন ফাইলের শীর্ষে অনুলিপি করে আটকে দিয়েছেন বা না করেছেন , এটি কাজ করবে, কারণ এটি উপরের সেট করে দেওয়া কোনও ফাইল-স্কোপ শৈলী সেটিংসকে ওভাররাইড করে এবং অগ্রাধিকার গ্রহণ করে:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
আপনি এটিকে একাধিক লাইনেও ফর্ম্যাট করতে পারেন এবং এটি এখনও কার্যকর হবে:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
৩. উপরের সমস্তগুলি ছাড়াও, আপনি পৃথক চিত্রগুলিকে স্টাইলাইজ করতে সহায়তা করতে CSS স্টাইলের ক্লাসও তৈরি করতে পারেন:
আপনার মার্কডাউন ফাইলের শীর্ষে এই পুরো জিনিসটি জুড়ুন।
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
এখন, আপনার imgসিএসএস ব্লকটি চিত্রগুলিকে কেন্দ্রিক করে তোলার জন্য ডিফল্ট সেটিংস সেট করেছে এবং স্ক্রিনের জায়গার প্রস্থের 60% আকারে রয়েছে, তবে আপনি চিত্র-দ্বারা-চিত্রের ভিত্তিতে সেই সেটিংসকে ওভাররাইড করতে CSS leftAlignএবং rightAlignক্লাস ব্যবহার করতে পারেন ।
উদাহরণস্বরূপ, এই চিত্রটি কেন্দ্র-প্রান্তিক হবে এবং আকারে 60% হবে (আমি উপরে পূর্বনির্ধারিত ডিফল্ট):
<img src="https://i.stack.imgur.com/RJj4x.png">
এই চিত্রটি ডানদিকে পাঠ্য মোড়ানো সহ, বাম-প্রান্তিককরণ করা হবে , leftAlignআমরা স্রেফ উপরে তৈরি সিএসএস ক্লাসটি ব্যবহার করে !
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
এটি দেখতে এটির মতো দেখাবে:
আপনি এখনও এর কোনও সিএসএস বৈশিষ্ট্যাবলী styleঅ্যাট্রিবিউটর মাধ্যমে ওভাররাইড করতে পারেন , তবে এর মতো প্রস্থ যেমন:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
এবং এখন আপনি এটি পাবেন:
৪ টি সিএসএস ক্লাস তৈরি করুন তবে imgমার্কডাউন ডিফল্ট পরিবর্তন করবেন না change
আমরা কেবল উপরে উপরে যা দেখিয়েছি তার অন্য একটি বিকল্প, যেখানে আমরা ডিফল্ট img property:valueসেটিংস পরিবর্তন করেছি এবং 2 টি শ্রেণি তৈরি করেছি, কেবলমাত্র সমস্ত ডিফল্ট মার্কডাউন imgবৈশিষ্ট্যকে একা ছেড়ে চলে যেতে হবে , তবে 3 টি কাস্টম সিএসএস ক্লাস তৈরি করা হবে :
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
অবশ্যই এটি ব্যবহার করুন:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
উপরের widthসিএসএস styleঅ্যাট্রিবিউটটি ব্যবহার করে আমি কীভাবে সম্পত্তিটিকে সেট করে রেখেছি তা লক্ষ্য করুন , তবে আমার আরও কিছু জটিল হতে চাইলে আমি <style>...</style>উপরের ব্লকের মধ্যে এগুলি যুক্ত করে আরও কিছু অতিরিক্ত ক্লাস তৈরি করতে পারতাম :
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
এখন আপনি একই বস্তুতে একাধিক ক্লাস নির্ধারণ করতে পারেন। কেবলমাত্র একটি স্পেস, না একটি কমা দ্বারা পৃথক ক্লাসের নাম । পরস্পরবিরোধী সেটিংস ক্ষেত্রে, আমি বিশ্বাস করি যেটা সেটিং আসে গত এক যে কার্যকর হয়, কোনো পূর্ববর্তী সেট সেটিংস যাই হোক হবে। আপনি একই সিএসএস বৈশিষ্ট্যগুলিকে একই সিএসএস শ্রেণিতে একাধিকবার সেট করেছেন বা একই এইচটিএমএল styleবৈশিষ্ট্যের অভ্যন্তরে একই ঘটনা হওয়া উচিত ।
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
৫. সিএসএস শ্রেণিতে সাধারণ সেটিংস একীভূত করুন:
সর্বশেষ কৌশলটি এখানে এই উত্তরে আমি শিখেছি: একাধিক চিত্রকে আলাদাভাবে স্টাইল করতে আমি কীভাবে CSS ব্যবহার করতে পারি? । আপনি উপরে দেখতে পারেন, সিএসএসের সমস্ত 3 টি alignক্লাস চিত্রের প্রস্থ 60% এ সেট করেছে। অতএব, আপনি যদি চান তবে এই সাধারণ সেটিংসটি একবারে এইভাবে সেট করা যেতে পারে, তবে আপনি পরে প্রতিটি শ্রেণীর জন্য নির্দিষ্ট সেটিংস সেট করতে পারেন:
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
আরো বিস্তারিত:
1. মার্কডাউনতে এইচটিএমএল এবং সিএসএসে আমার চিন্তাভাবনা
যতদূর আমি উদ্বিগ্ন, মার্কডাউন ডকুমেন্টে যা কিছু লেখা যায় এবং কাঙ্ক্ষিত ফলাফল পাওয়া যায় তা হ'ল আমাদের পরে, কিছু "খাঁটি মার্কডাউন" বাক্য গঠন নয়।
সি এবং সি ++ তে, সংকলকটি সমাবেশ কোডটি সংকলন করে এবং অ্যাসেম্বলিটি পরে বাইনারিতে একত্রিত হয়। কখনও কখনও, তবে আপনার কেবল নিম্ন-স্তরের নিয়ন্ত্রণের প্রয়োজন যা কেবল সমাবেশ সরবরাহ করতে পারে এবং তাই আপনি কোনও সি বা সি ++ উত্স ফাইলের অভ্যন্তরে ইনলাইন সমাবেশ লিখতে পারেন। সমাবেশ হ'ল "নিম্ন স্তরের" ভাষা এবং এটি সি এবং সি ++ এর মধ্যেই লেখা যায়।
সুতরাং এটি মার্কডাউন সহ। মার্কডাউন হ'ল উচ্চ-স্তরের ভাষা যা এইচটিএমএল এবং সিএসএসে ব্যাখ্যা করা হয়। তবে, যেখানে আমাদের অতিরিক্ত নিয়ন্ত্রণের প্রয়োজন সেখানে আমরা আমাদের মার্কডাউন ফাইলের ঠিক নীচে নিম্ন-স্তরের এইচটিএমএল এবং সিএসএসকে "ইনলাইন" করতে পারি এবং এটি এখনও সঠিকভাবে ব্যাখ্যা করা হবে। এক অর্থে, তাই HTML এবং CSS এর দ্বারা বৈধ "markdown" সিনট্যাক্স।
সুতরাং, মার্কডাউনতে একটি চিত্র কেন্দ্র করতে, এইচটিএমএল এবং সিএসএস ব্যবহার করুন।
2. মার্কডাউনে স্ট্যান্ডার্ড চিত্র সন্নিবেশ:
ডিফল্ট "পর্দার অন্তর্ভুক্ত" এইচটিএমএল এবং সিএসএস ফর্ম্যাটিং সহ মার্কডাউনে কীভাবে একটি মৌলিক চিত্র যুক্ত করা যায়:
এই চিহ্নিতকরণ:
এই আউটপুট উত্পাদন করবে:
এটি আমার তৈরি ফায়ার-শুটিং হেক্সাকোপ্টার ।
আপনি খোলার স্কোয়ার বন্ধনীগুলিতে বিকল্পভাবে একটি বিবরণ যুক্ত করতে পারেন। সত্যিই আমি এটি নিশ্চিত যে এমনকি এটি কি না, তবে সম্ভবত এটি একটি এইচটিএমএল <img>উপাদান altবৈশিষ্ট্যে রূপান্তরিত হয়ে যায় , যা চিত্রটি লোড করতে না পারার ক্ষেত্রে প্রদর্শিত হয় এবং অন্ধদের জন্য পর্দার পাঠকদের দ্বারা পড়তে পারে। সুতরাং, এই চিহ্নিতকরণ:
এই আউটপুট উত্পাদন করবে:
৩. মার্কেডাউনে কোনও চিত্রকে কেন্দ্র করে এবং পুনরায় আকার দেওয়ার সময় এইচটিএমএল / সিএসএসে কী ঘটছে সে সম্পর্কে আরও বিশদ:
মার্কডাউনতে চিত্রটি কেন্দ্রীকরণের প্রয়োজন যে এইচটিএমএল এবং সিএসএস আমাদের সরাসরি আমাদের দিতে পারে এমন অতিরিক্ত নিয়ন্ত্রণ ব্যবহার করা উচিত। আপনি এটির মতো একটি পৃথক চিত্র সন্নিবেশ এবং কেন্দ্র করতে পারেন:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
এখানে আরও তথ্য। এখানে কি চলছে উপর:
<imgউপরের কোড অংশ এইচটিএমএল "হয় ট্যাগটি শুরু ", যখন >শেষে এইচটিএমএল "হয় শেষ ট্যাগ "।- শুরুর ট্যাগ থেকে শেষ ট্যাগ পর্যন্ত সমস্ত কিছুই এই এইচটিএমএলকে
img" উপাদান " তৈরি করে।
- এইচটিএমএলতে চিত্রগুলি প্রবেশের জন্য এইচটিএমএল
img "ট্যাগ" / "উপাদান" ব্যবহার করা হয়।
- উপাদানটির ভিতরে থাকা প্রতিটি অ্যাসাইনমেন্ট একটি এইচটিএমএল " অ্যাট্রিবিউট " কনফিগার করে ।
- "শৈলী" অ্যাট্রিবিউট গ্রহণ সিএসএস স্টাইলিং , তাই উদ্ধৃতি চিহ্ন এখানে ভিতরে সবকিছু:
style=""একটি CSS হল property:valueকী-মান " ঘোষণা "।
- নোট করুন যে প্রতিটি সিএসএস "সম্পত্তি: মান ঘোষণা" একটি সেমিকোলন (
;) দ্বারা পৃথক করা হয় , যেখানে এই "উপাদান" এর প্রতিটি এইচটিএমএল "বৈশিষ্ট্য" একটি স্পেস (
- উপরের আমাদের এইচটিএমএল এবং সিএসএস কোডে চিত্রটি কেন্দ্রে পেতে, মূল "বৈশিষ্ট্যগুলি" কেবলমাত্র
srcএবং styleএকটি।
altএক ঐচ্ছিক।- এইচটিএমএল ইনসাইড
styleঅ্যাট্রিবিউট, যা সিএসএস স্টাইলিং গ্রহণ, কী ঘোষণা সব 4 আছে আমি দেন: display:block, float:none, margin-left:auto, এবং margin-right:auto।
- এর আগে যদি কোনও
float সম্পত্তি আগে সেট না করে থাকে , তবে আপনি এই ঘোষণাটি ছেড়ে দিতে পারেন, তবে যেভাবেই হোক না কেন এটি রাখা ভাল ধারণা।
- যদি HTML এবং CSS ব্যবহার করে কোনও চিত্র কীভাবে কেন্দ্র করতে হয় তা যদি এখানে শিখে থাকেন তবে: https://www.w3schools.com/howto/howto_css_image_center.asp ।
- সিএসএস সি-স্টাইলের মন্তব্য (
/* my comment */) ব্যবহার করে।
তথ্যসূত্র:
- সিএসএস সিনট্যাক্স সম্পর্কে আরও পড়ুন: https://www.w3schools.com/css/css_syntax.asp
- সম্পর্কে পড়ুন "এইচটিএমএল ট্যাগ বনাম উপাদানসমূহ" এখানে ।
- আমি এখানে আমার গিটহাব মার্কডাউন রিডমে আমার এইচটিএমএল এবং সিএসএস স্টাইলিং অনুশীলন করেছি: https://github.com/ElectricRCAircraftGuy/Ardino-STEM- উপস্থাপনা
- এইচটিএমএল এবং সিএসএস সম্পর্কে আমি যা জানি তার সম্পর্কে আমি w3schools.com- এ ক্লিক করে প্রায় শিখেছি। এখানে কয়েকটি নির্দিষ্ট পৃষ্ঠা রয়েছে:
- %% ৯০% https://www.w3schools.com/howto/howto_css_image_center.asp
- https://www.w3schools.com/css/css_float.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
- https://www.w3schools.com/css/css3_images.asp
- https://www.w3schools.com/tags/default.asp
- এইচটিএমএল এবং সিএসএসের মন্তব্য: https://www.w3schools.com/css/css_comments.asp
- আমার ফায়ার-শ্যুটিং হেক্সাকোপ্টারটি আমি তৈরি করেছি: https://www.electricrcairraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
