Как можно отображать изображения бок о бок в GitHub README.md?
Я пытаюсь показать сравнение между двумя фотографиями в моем README.md вот почему я хочу показать их бок о бок. здесь как эти два изображения размещаются в настоящее время. Я хочу показать две Соляризованные цветовые схемы бок о бок, а не сверху и снизу. Помощь была бы очень признательна, спасибо!
5 ответов:
самый простой способ, который я могу придумать для решения этой проблемы, - это использовать таблицы включено в ароматизированную уценку GitHub.
для вашего конкретного примера это будет выглядеть примерно так:
Solarized dark | Solarized Ocean :-------------------------:|:-------------------------:  | это создает таблицу с Solarized Dark и Ocean в качестве заголовков, а затем содержит изображения в первой строке. Очевидно, вы бы заменили
...с реальной ссылке. Элемент:s являются необязательными (они просто центрируют содержимое в ячейках, что является своего рода ненужный в данном случае). Также вы можете уменьшить размер изображений, чтобы они отображались лучше бок о бок.
вы можете разместить каждое изображение бок о бок, записав уценку для каждого изображения на одной строке.
 пока изображения не слишком большие, они будут отображаться в строке, как показано на этом снимке экрана файла README из GitHub:
появится три изображения бок о бок, если изображения не широкий.
<p float="left"> <img src="/img1.png" width="100" /> <img src="/img2.png" width="100" /> <img src="/img3.png" width="100" /> </p>
Как и в других примерах, но с использованием html-размеров, я использую:
<img src="image1.png" width="425"/> <img src="image2.png" width="425"/>вот пример
<img src="/images/content/24319505/7cfc914ab9fc8255b9008a650e780ee1.png" width="200"/> <img src="/images/content/24319505/7ae5d0b177f1b4e4296238802d4abae6.svg" width="300"/>
Я проверил это с помощью замечательный.
если, как и я, вы обнаружили, что @wiggin answer не работает и изображения по-прежнему не отображаются в строке, вы можете использовать свойство "align" тега html image и некоторые перерывы для достижения желаемого эффекта, например:
# 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