গিটিহাব README.md- এ কীভাবে একজন চিত্র পাশাপাশি থাকতে পারে?

Question

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

Comments

: আমি মার্কআপ নিজেকে লেখা ছাড়া একটু ওয়েব-হাতিয়ার এবং সারিবদ্ধ ইমেজ আপনি যোগ করতে অনুমতি দেয় নির্মিত stackoverflow.com/a/32790440/2477619

— B12Toaster

প্রশ্ন থেকে লিঙ্কটি কাজ করে না

— ভ্যালেন্টাইন জখারেঙ্কো

Answer 1

এটি সমাধান করার সহজ উপায় আমি গিটহাবের স্বাদযুক্ত মার্কডাউন-এ অন্তর্ভুক্ত সারণীগুলি ব্যবহার করে ।

আপনার নির্দিষ্ট উদাহরণে এটি দেখতে এরকম কিছু লাগবে:

Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

এটি সোলারাইজড গাark় এবং মহাসাগর সহ শিরোনাম হিসাবে একটি সারণী তৈরি করে এবং তারপরে প্রথম সারিতে চিত্রগুলি রাখে। স্পষ্টতই আপনি ...আসল লিঙ্কটি দিয়ে প্রতিস্থাপন করবেন । :গুলি ঐচ্ছিক (তারা শুধু কোষ, যা এই ক্ষেত্রে ধরণ অপ্রয়োজনীয় সামগ্রীটি কেন্দ্র)। এছাড়াও আপনি চিত্রগুলি কমাতে চাইবেন যাতে তারা পাশাপাশি-পাশাপাশি আরও ভালভাবে প্রদর্শন করতে পারে।

Comments

![](https://...Ocean.png)Squ স্কোয়ার ধনুর্বন্ধনীগুলির মধ্যে আপনি আল্ট-পাঠ্য যুক্ত করতে পারেন যা প্রদর্শিত হয় যখন আপনি চিত্রের উপরে উঠবেন।

— আদি

আপনি যদি গিথুবগুলিতে একই লাইনে আরও চিত্র রাখতে চান তবে এই সমাধানটি আরও ভাল। আমি এই দ্রবণটি দিয়ে একই লাইনে 4 টি রাখতে পেরেছি তবে উইগিংয়ের সমাধান সহ কেবল 3 টি।

— ভিনজি

চমৎকার! পাশাপাশি বিটবকেট নিয়ে কাজ করে। (ভাল, আমি কমপক্ষে নিশ্চয়তা দিতে পারি যে এটি তাদের পুল অনুরোধের স্ক্রিনে কাজ করে))

— নেট কুক

খুব খারাপ এটি আপনার চিত্রগুলির চারপাশে একটি সীমানা রাখে।

— যাযাবর

@ এপিকডাভি: আপনার কোডের প্রসঙ্গে আপনি কীভাবে টেবিলের মধ্যে চিত্রগুলি হ্রাস করবেন?

— ইমাগার

Answer 2

আপনি একই লাইনে প্রতিটি চিত্রের মার্কডাউন লিখে প্রতিটি চিত্র পাশাপাশি রাখতে পারেন।

![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")

যতক্ষণ না ছবিগুলি খুব বেশি বড় না হয় ততক্ষণ তারা গিটহাব থেকে একটি README ফাইলের এই স্ক্রিন শট দ্বারা প্রদর্শিত হিসাবে ইনলাইন প্রদর্শন করবে:

Comments

আমার জন্য বেশ কাজ করে না। (আপেক্ষিক) চিত্রগুলির মধ্যে একটি জিআইএফ

— রিধওয়ান শাকিল

@ রিদ্ধওয়ানশাকিল আপনার চিত্রগুলি জিআইএফ কিনা তা বিবেচ্য নয়। আমি এই পদ্ধতির সাথে সফলভাবে দুটি জিআইএফ পাশাপাশি রেখেছি।

— সোসোই

জিআইএফ ফাইলগুলির জন্য কাজ করেনি।

— উগুরোস

Answer 3

চিত্রগুলি খুব প্রশস্ত না হলে এটি পাশাপাশি তিনটি চিত্র প্রদর্শন করবে।

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>

Comments

দুর্দান্ত এবং স্ট্রেট-ফরোয়ার্ড সলিউশনটির আরও বেশি পরিমাণে উচিৎ হওয়া উচিত।

— নিকেক্সদা

হ্যাঁ, প্রকৃতপক্ষে, এটির আরও বেশি কিছু হওয়া উচিত! আমি <p align="middle">কেন্দ্রের চিত্রগুলি সারিবদ্ধ করতাম ।

— রেজা ডজ

প্রতিটি চিত্রের শিরোনাম যুক্ত করা কি সম্ভব?

— I_told_you_so

এটি নিখুঁত! এটি চিত্রগুলির মাপগুলি নির্দিষ্ট করার অনুমতি দেয়।

— कौशल 28

আমি মোট প্রস্থের শতাংশ হিসাবে চিত্রটি উল্লেখ করতে পছন্দ করি, উদাহরণস্বরূপ width="32%"3 টি চিত্র সারিবদ্ধ করার সময়

— ইগোর ফোবিয়া

Answer 4

অন্যান্য উদাহরণগুলির মতো, তবে এইচটিএমএল আকারের ব্যবহার করে আমি ব্যবহার করি:

<img src="image1.png" width="425"/> <img src="image2.png" width="425"/> 

এখানে একটি উদাহরণ

<img src="https://openclipart.org/image/2400px/svg_to_png/28580/kablam-Number-Animals-1.png" width="200"/> <img src="https://openclipart.org/download/71101/two.svg" width="300"/>

আমি এটি উল্লেখযোগ্য ব্যবহার করে পরীক্ষা করেছি ।

Comments

আমি <img height="350" hspace="20"/>কোনও ইস্যুতে চিত্রগুলির মধ্যে বিভাজক হিসাবে ব্যবহার করেছি ( উইগিংয়ের উত্তর কার্যকর হয়নি)।

— এমানুয়েলমেস

বাহ কি অসাধারণ লক্ষণীয় এমডি সম্পাদক। ধন্যবাদ.

— হেল্ডার Velez

অবশেষে! ধন্যবাদ :-)

— হার্নান আরবার

দুর্দান্ত এবং স্ট্রেট-ফরোয়ার্ড সলিউশনটির আরও উপভোগ করা উচিত।

— আইনেট

এটি বৃহত্তর চিত্রগুলির সাথেও কাজ করে যা এক সারিতে ফিট করার জন্য আকার পরিবর্তন করতে হবে।

— ফরহানহাবল

Answer 5

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

# Title

<img align="left" src="./documentation/images/A.jpg" alt="Made with Angular" title="Angular" hspace="20"/>
<img align="left" src="./documentation/images/B.png" alt="Made with Bootstrap" title="Bootstrap" hspace="20"/>
<img align="left" src="./documentation/images/C.png" alt="Developed using Browsersync" title="Browsersync" hspace="20"/>
<br/><br/><br/><br/><br/>

## Table of Contents...

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

Comments

ধন্যবাদ! এছাড়াও hspaceএকটি ঝরঝরে সামান্য কৌতুক যদি ছবির মধ্যে পর্যাপ্ত স্থান নয়। গিথুব আসলে জানতেন না।

— নালদেভ

Answer 6

আপনার অ্যাপ্লিকেশনটির চিত্র / স্ক্রিনশট যুক্ত করার এবং আপনার সংগ্রহস্থলের চেহারাটি পরিষ্কার রাখার সেরা উপায় এটি।

screenshotআপনার সংগ্রহস্থলে একটি ফোল্ডার তৈরি করুন এবং আপনি যে চিত্রগুলি প্রদর্শন করতে চান তা যুক্ত করুন।

এখন যান README.mdএবং একটি টেবিল গঠন করতে এই এইচটিএমএল কোড যুক্ত করুন।

#### Flutter App Screenshots

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td><img src="screenshots/Screenshot_1582745092.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745125.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745139.png" width=270 height=480></td>
  </tr>
 </table>

মধ্যে <td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** চিত্রের পথটি পেতে -> screenshotফোল্ডারে যান এবং imageডানদিকে এবং ডানদিকে খুলুন , আপনি Copy pathবোতামটি দেখতে পাবেন ।

আপনি আপনার সংগ্রহশালায় এর মতো একটি টেবিল পাবেন --->

Comments

শুকরান মারুফ :) আপনি আমার দিনটি তৈরি করেছেন!

— এমবিএইচ

Answer 7

@ মারুফ হাসানকে পিগব্যাক অফ করা

# Title

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td valign="top"><img src="screenshots/Screenshot_1582745092.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745125.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745139.png"></td>
  </tr>
 </table>

<td valign="top">...</td>গিটহাব মার্কডাউন দ্বারা সমর্থিত। বিভিন্ন উচ্চতা সহ চিত্রগুলি কোষের শীর্ষের নিকটে উল্লম্বভাবে সারিবদ্ধ হতে পারে না। এই সম্পত্তি এটি আপনার জন্য পরিচালনা করে।

Comments

আমি এই সম্পর্কে জানতাম না। স্ক্রিনটি তাদের প্রাকৃতিক আকারে স্বয়ংক্রিয়ভাবে সারিবদ্ধ করার জন্য আমি যা খুঁজছিলাম। ধন্যবাদ!

— মারুফ হাসান