GitHub README.md में कोई एक ओर चित्र कैसे प्रदर्शित कर सकता है?

Question

मैं अपने README.md में दो तस्वीरों के बीच तुलना दिखाने की कोशिश कर रहा हूं, यही वजह है कि मैं उन्हें अगल-बगल दिखाना चाहता हूं। यहाँ दो छवियों को वर्तमान में कैसे रखा गया है। मैं दो Solarized रंग योजनाओं को ऊपर और नीचे के बजाय कंधे से कंधा मिलाकर दिखाना चाहता हूं। मदद बहुत सराहना की जाएगी, धन्यवाद!

Comments

मैंने एक छोटा सा वेब-टूल बनाया है जो आपको मार्कअप लिखने के बिना छवियों को जोड़ने और संरेखित करने की अनुमति देता है: stackoverflow.com/a/32790440/2477619

— B12Toaster

सवाल से लिंक काम नहीं करता है

— वेलेंटाइन ज़खरेंको

Answer 1

सबसे आसान तरीका मैं इसे हल करने के बारे में सोच सकता हूं जो कि GitHub के स्वाद वाले मार्कडाउन में शामिल तालिकाओं का उपयोग कर रहा है ।

अपने विशिष्ट उदाहरण के लिए यह कुछ इस तरह दिखेगा:

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

यह हेडर के रूप में Solarized Dark और Ocean के साथ एक तालिका बनाता है और फिर पहली पंक्ति में चित्र शामिल करता है। जाहिर है आप ...असली लिंक से बदल देंगे । :रों वैकल्पिक हैं (वे सिर्फ कोशिकाओं, जो इस मामले में थोड़े अनावश्यक है में सामग्री बीच में)। इसके अलावा, आप छवियों को छोटा करना चाहते हैं ताकि वे बेहतर साइड-बाय-साइड प्रदर्शित हों।

Comments

![](https://...Ocean.png)उन स्क्वायर ब्रेसेस के बीच में आप Alt-Text जोड़ सकते हैं जो छवि पर हॉवर करते समय प्रदर्शित होता है।

— आदि

यह समाधान बेहतर है यदि आप एक ही लाइन पर अधिक चित्र गिटहब पर लगाना चाहते हैं। मैं इस समाधान के साथ एक ही लाइन पर 4 लगाने में कामयाब रहा, लेकिन विगिंग के समाधान के साथ केवल 3।

— विन्जी

आश्चर्यजनक! Bitbucket के साथ भी काम करता है। (ठीक है, मैं कम से कम यह प्रतिज्ञा कर सकता हूं कि यह उनके पुल अनुरोध स्क्रीन पर काम करता है।)

— नैट कुक

बहुत बुरा यह आपकी छवियों के चारों ओर एक सीमा रखता है।

— खानाबदोश

@EpicDavi: आपके कोड के संदर्भ में, आप तालिका के भीतर छवियों को कैसे छोटा करते हैं?

— एमगर

Answer 2

आप प्रत्येक छवि को एक ही पंक्ति में प्रत्येक छवि के लिए मार्कडाउन लिखकर साइड-बाय-साइड रख सकते हैं।

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

जब तक छवियां बहुत बड़ी नहीं होतीं, वे GitHo से README फाइल के इस स्क्रीन शॉट द्वारा प्रदर्शित इनलाइन प्रदर्शित करेंगे:

Comments

मेरे लिए बहुत काम नहीं करता है। (रिश्तेदार) छवियों में से एक एक

— जिफ है

@RidhwaanShakeel इससे कोई फर्क नहीं पड़ता कि आपकी छवियां gif हैं या नहीं। मैंने सफलतापूर्वक इस विधि के साथ कंधे से कंधा मिलाकर दो जिफ लगाए।

— सोकोवई

जीआईएफ फाइलों के लिए काम नहीं किया।

— इगुरोस

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

महान और सीधे-आगे वाले समाधान में अधिक उत्थान होना चाहिए।

— निकक्सडा

हाँ, वास्तव में, यह अधिक upvotes होना चाहिए! मैं <p align="middle">केंद्र पर छवियों को संरेखित करता था।

— रेजा डॉज

क्या प्रत्येक चित्र में एक शीर्षक जोड़ना संभव है?

— I_told_you_so

यह पूर्ण है! जैसा कि यह छवियों के आकार को निर्दिष्ट करने की अनुमति देता है।

— कौशल्या 28

मैं कुल चौड़ाई के एक प्रतिशत के रूप में छवि को निर्दिष्ट करना पसंद करता हूं, उदाहरण के लिए width="32%"जब 3 छवियों को संरेखित करता है

— इगोर फोबिया

Answer 4

अन्य उदाहरणों के समान, लेकिन html आकार का उपयोग करते हुए, मैं उपयोग करता हूं:

<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"/>एक मुद्दे में छवियों के बीच एक विभाजक के रूप में इस्तेमाल किया ( विगिंग का जवाब काम नहीं किया)।

— इमैनुएलमेस

वाह क्या उल्लेखनीय उल्लेखनीय एमडी संपादक। धन्यवाद।

— हेल्डर वेलेज़

आखिरकार! धन्यवाद :-)

— हरनान आर्बर

महान और सीधे-आगे समाधान, अधिक Upvotes होना चाहिए।

— INet

यह बड़ी छवियों के साथ भी काम करता है जिन्हें एक पंक्ति में फिट होने के लिए आकार बदलने की आवश्यकता होती है।

— फरहानबुल

Answer 5

यदि, मेरी तरह, आपने पाया कि @wiggin जवाब काम नहीं करता है और छवियां अभी भी इन-लाइन दिखाई नहीं देती हैं, तो आप उदाहरण के लिए वांछित प्रभाव को प्राप्त करने के लिए html छवि टैग की 'संरेखित' संपत्ति और कुछ विराम का उपयोग कर सकते हैं:

# 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एक टेबल बनाने के लिए इस HTML कोड को शामिल करें।

#### 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>GitHub Markdown द्वारा समर्थित है। अलग-अलग ऊंचाइयों वाली छवियां सेल के शीर्ष के पास लंबवत संरेखित नहीं हो सकती हैं। यह संपत्ति आपके लिए इसे संभालती है।

Comments

मुझे इसकी जानकारी नहीं थी। यह वही था जो मैं स्क्रीन को उनके प्राकृतिक आकार में स्वचालित रूप से संरेखित करने के लिए देख रहा था। धन्यवाद!

— मारूफ हसन