web-dev-qa-db-ja.com

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

README.mdで2枚の写真の比較を表示しようとしているので、それらを並べて表示したいのです。 ここ は、2つの画像の現在の配置方法です。 2つのソラライズカラースキームを上下ではなく並べて表示したいと思います。助けていただければ幸いです！

githubgithub-flavored-markdown
114
saadq

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

具体的な例では、次のようになります。

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

これにより、ヘッダーとしてSolarized DarkとOceanを含むテーブルが作成され、最初の行に画像が含まれます。明らかに、...を実際のリンクに置き換えます。 :sはオプションです（これらはセル内のコンテンツを中央に配置するだけで、この場合は不要です）。また、画像のサイズを小さくして、並べて表示することもできます。

180
EpicDavi

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

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

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

inline images

96
wigging

これは、画像が広くない場合、3つの画像を並べて表示します。

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

他の例と似ていますが、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 を使用してこれをテストしました。

30
Steven C. Howell

私のように、@ 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...

明らかに、画像の大きさに応じてより多くの休憩を使用する必要があります。

6
LJH