GitHub README.mdに画像を並べて表示するにはどうすればよいですか?


163

2つの写真の比較をREADME.mdで表示しようとしています。そのため、写真を並べて表示します。ここでは 2枚の画像が現在置かれている方法です。2つのSolarizedカラースキームを上下ではなく並べて表示したいと思います。助けてくれてありがとう、ありがとう!


マークアップを自分で記述せずに画像を追加して位置合わせできる小さなWebツールを作成しました:stackoverflow.com/a/32790440/2477619
B12Toaster

1
質問からのリンクが機能しない
バレンタインザハレンコ

回答:


267

これを解決する最も簡単な方法は、GitHubのフレーバーマークダウンに含まれているテーブルを使用することです。

特定の例では、次のようになります。

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

これにより、Solarized DarkとOceanをヘッダーとして持つテーブルが作成され、最初の行に画像が含まれます。明らかに...、実際のリンクに置き換えます。:Sは(彼らはただ、この場合にちょっと不要である細胞内のコンテンツを中央)オプションです。また、並べて表示するために、画像のサイズを小さくすることもできます。


8
![](https://...Ocean.png)これらの角括弧の間に、画像にカーソルを合わせると表示されるAlt-Textを追加できます。
Adi

このソリューションは、githubの同じ行にさらに多くの画像を配置する場合に適しています。私はこのソリューションで同じラインに4つ置くことができましたが、ウィギングのソリューションでは3つしかありませんでした。
vinzee 2017

素晴らしい!Bitbucketでも動作します。(まあ、私は少なくともそれがプルリクエスト画面で機能することを保証できます。)
Nate Cook

1
残念ながら、これは画像の周囲に境界を置きます。
nomad

1
@EpicDavi:コードのコンテキストで、テーブル内の画像をどのように縮小しますか?
emagar

115

各画像のマークダウンを同じ行に書き込むことで、各画像を並べて配置できます。

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

画像が大きすぎない限り、GitHubのREADMEファイルの次のスクリーンショットで示されているように、インラインで表示されます。

インライン画像


私にとってはうまくいきません。(相対)画像の1つはgifです
Ridhwaan Shakeel

@RidhwaanShakeel画像がgifであるかどうかは問題ではありません。この方法で2つのgifを並べて配置することに成功しました。
ソコウィ

gifファイルでは機能しませんでした。
ウグロ

105

これにより、画像の幅が広すぎない場合、3つの画像が並べて表示されます。

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

2
素晴らしく簡単な解決策は、賛成票を増やすべきです。
NikxDa 2017年

10
はい、確かに、それはより多くの賛成票を持つべきです!昔<p align="middle">は画像を中央に揃えていました。
Reza Dodge

各画像にタイトルを付けることはできますか?
I_told_you_so

これは完璧です!画像のサイズを指定できるので。
Kaushal28

1
画像を合計幅のパーセンテージとして指定することを好みます。たとえばwidth="32%"、3つの画像を配置する場合
Igor Fobia

37

他の例と同様ですが、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"/>

Remarkableを使用してこれをテストしました。


4
<img height="350" hspace="20"/>問題の画像間の区切りとして使用しました(ウィッグの答えが機能しませんでした)。
EmmanuelMess

なんて驚くべきRemarkable mdエディターでしょう。ありがとうございました。
Helder Velez

最後に!ありがとう:-)
Hernan Arber

素晴らしく簡単な解決策は、より多くの賛成票を持つべきです
iNet

これは、1行に収まるようにサイズ変更する必要がある大きな画像でも機能します。
farhanhubble

8

私のように、@ wigginの回答が機能せず、画像がまだインラインで表示されない場合は、html画像タグの 'align'プロパティといくつかの改行を使用して、目的の効果を得ることができます。次に例を示します。

# 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...

明らかに、画像の大きさによっては、より多くの休憩を使用する必要があります。ひどいはい、しかしそれは私にとってはうまくいったので、共有したいと思いました。


3
ありがとうございました!またhspace、写真の間に十分なスペースがない場合も、きちんとした小さなトリックです。githubが実際にそれを解析することを知りませんでした。
NullDev 2017年

7

これは、アプリの画像/スクリーンショットを追加し、リポジトリをきれいに保つための最良の方法です。

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ボタンがあります。

リポジトリにこのようなテーブルが表示されます--->

ここに画像の説明を入力してください


Shukran Maruf :)あなたは私の一日を作りました!
MBH

1

@Maruf Hassanから便乗する

# 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でサポートされています。高さが変化する画像は、セルの上部近くで垂直に整列しない場合があります。このプロパティはそれを処理します。


私はこれについて知りませんでした。画面を自然なサイズに自動的に調整するために私が探していたものです。ありがとう!
Maruf Hassan
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.