Как можно отображать изображения бок о бок в GitHub README.md?

Я пытаюсь показать сравнение двух фотографий на моем README.md, поэтому я хочу показывать их бок о бок. Здесь показано, как два изображения размещаются в настоящее время. Я хочу показать две Solarized цветовые схемы бок о бок, а не сверху и снизу. Помощь будет очень признательна, спасибо!

Ответ 1

Самый простой способ решить это - использовать tables, включенный в уценку GitHub.

В вашем конкретном примере это выглядит примерно так:

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

Это создает таблицу с Solarized Dark и Ocean в качестве заголовков, а затем содержит изображения в первой строке. Очевидно, вы заменили бы ... на реальную ссылку. : являются необязательными (они просто центрируют содержимое в ячейках, что в данном случае является ненужным). Также вы можете уменьшить размер изображений, чтобы они отображались лучше друг от друга.

Ответ 2

Вы можете размещать каждое изображение бок о бок, записывая уценку для каждого изображения в той же строке.

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

Пока изображения не слишком велики, они будут отображаться в строке, как показано на этом снимке экрана файла README из GitHub:

Ответ 3

Как и в других примерах, но используя 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

Это отобразит три изображения рядом друг с другом, если изображения не являются широкими.

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

Ответ 5

Если, как и я, вы обнаружили, что ответ @wiggin не работает, и изображения все еще не отображаются в строке, вы можете использовать свойство align для тега изображения 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...

Очевидно, вам нужно использовать больше перерывов в зависимости от того, насколько велики изображения: ужасно, да, но это сработало для меня, поэтому я думал, что поделюсь.