TLDR;
Используйте этот HTML / CSS для добавления и центрирования изображения и установите его размер равным 60% ширины пространства экрана в вашем файле уценки, что обычно является хорошим начальным значением:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Изменить width значение CSS на любой процент, который вы хотите, или полностью удалите его, чтобы использовать размер по умолчанию для уценки, который, я думаю, составляет 100% ширины экрана, если изображение больше экрана, или в противном случае это фактическая ширина изображения.
Готово!
Или продолжайте читать, чтобы узнать больше информации.
Вот различные варианты HTML и CSS, которые прекрасно работают в файлах разметки:
1. Отцентрируйте и настройте (измените размер) ВСЕ изображения в вашем файле уценки:
Просто скопируйте и вставьте это в верхнюю часть вашего файла уценки, чтобы отцентрировать и изменить размеры всех изображений в файле (затем просто вставьте все изображения, которые вы хотите с обычным синтаксисом уценки):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
Или вот тот же код, что и выше, но с подробными комментариями HTML и CSS, чтобы точно объяснить, что происходит:
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
Теперь, вставляете ли вы изображение с помощью уценки:
Или HTML в вашем файле уценки:
<img src="https://i.stack.imgur.com/RJj4x.png">
... он будет автоматически отцентрирован и размером до 60% ширины экрана, как описано в комментариях к HTML и CSS выше. (Конечно, размер 60% тоже очень легко изменить, и ниже я предлагаю простые способы сделать это для каждого изображения отдельно).
2. Центрируйте и настраивайте изображения по отдельности, по одному:
Независимо от того, скопировали ли вы указанный выше <style>блок и вставили его в верхнюю часть файла уценки, это также будет работать, поскольку оно переопределяет и имеет приоритет над любыми настройками стиля области действия файла, которые вы, возможно, установили выше:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Вы также можете отформатировать его в несколько строк, вот так, и он все равно будет работать:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
3. Помимо всего вышеперечисленного, вы также можете создавать классы стилей CSS, чтобы помочь стилизовать отдельные изображения:
Добавьте все это в начало вашего файла уценки.
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
Теперь ваш imgблок CSS установил настройку по умолчанию для изображений, которые должны быть центрированы, и 60% ширины экранного пространства по размеру, но вы можете использовать классы CSS leftAlignи rightAlignCSS, чтобы переопределить эти настройки для каждого изображения в отдельности.
Например, это изображение будет выровнено по центру и имеет размер 60% (по умолчанию я установил выше):
<img src="https://i.stack.imgur.com/RJj4x.png">
Это изображение будет выровнено по левому краю , однако с переносом текста вправо, используя leftAlignкласс CSS, который мы только что создали!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
Это может выглядеть так:
Тем не менее, вы можете переопределить любое из его свойств CSS через styleатрибут , например, width, например:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
И теперь вы получите это:
4. Создайте 3 CSS-класса, но не меняйте imgзначения по умолчанию для уценки
Другой вариант к тому, что мы только что показали выше, где мы изменили img property:valueнастройки по умолчанию и создали 2 класса, это просто оставить все imgсвойства уценки по умолчанию в покое, но создать 3 пользовательских класса CSS, например:
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
Используйте их, конечно, так:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
Обратите внимание, как я вручную устанавливал widthсвойство с помощью styleатрибута CSS выше, но если бы у меня было что-то более сложное, что я хотел сделать, я мог бы также создать некоторые дополнительные классы, подобные этой, добавив их в <style>...</style>блок выше:
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
Теперь вы можете назначить несколько классов одному объекту, как это. Просто разделяйте имена классов пробелом, а НЕ запятой . Я полагаю, что в случае противоречивых настроек, последний параметр будет последним , который вступит в силу, переопределив любые ранее установленные параметры. Это также должно иметь место в случае, если вы устанавливаете одни и те же свойства CSS несколько раз в одном и том же классе CSS или внутри одного и того же styleатрибута HTML .
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. Консолидация общих настроек в классах CSS:
Последний трюк, который я узнал в этом ответе здесь: Как я могу использовать CSS, чтобы по-разному стилизовать несколько изображений? , Как вы можете видеть выше, все 3 класса CSS alignустанавливают ширину изображения на 60%. Таким образом, этот общий параметр можно установить сразу, если хотите, тогда вы можете установить конкретные параметры для каждого класса:
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
Больше деталей:
1. Мои мысли о HTML и CSS в Markdown
Насколько я понимаю, все, что мы можем записать в документе уценки и получить желаемый результат - это не какой-то синтаксис «чистой уценки».
В C и C ++ компилятор компилируется в код сборки, а затем сборка собирается в двоичный код. Однако иногда вам необходим низкоуровневый элемент управления, который может обеспечить только сборка, и поэтому вы можете написать встроенную сборку прямо в исходном файле C или C ++. Ассемблер является языком «нижнего уровня», и его можно написать прямо в C и C ++.
Так же и с уценкой. Markdown - это язык высокого уровня, который интерпретируется как HTML и CSS. Однако там, где нам нужен дополнительный контроль, мы можем просто «встроить» HTML и CSS более низкого уровня прямо в наш файл уценки, и он все равно будет интерпретироваться правильно. Следовательно, в некотором смысле HTML и CSS являются допустимым синтаксисом «уценки».
Итак, чтобы центрировать изображение в уценке, используйте HTML и CSS.
2. Стандартная вставка изображения в уценке:
Как добавить базовое изображение в уценку с заданным по умолчанию «закулисным» форматированием HTML и CSS:
Эта уценка:
Будет производить этот вывод:
Это мой огнестрельный гексакоптер, который я сделал .
При желании вы также можете добавить описание в открывающиеся квадратные скобки. Честно говоря, я даже не уверен, что это делает, но, возможно, он преобразуется в атрибут элемента HTML<img>alt , который отображается в случае, если изображение не может быть загружено, и может быть прочитан программами чтения с экрана для слепых. Итак, эта уценка:
также произведет этот вывод:
3. Подробнее о том, что происходит в HTML / CSS при центрировании и изменении размера изображения в уценке:
Центрирование изображения в уценке требует, чтобы мы использовали дополнительный контроль, который HTML и CSS могут предоставить нам напрямую. Вы можете вставить и отцентрировать отдельное изображение следующим образом:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
Вот больше информации. о том, что здесь происходит:
<imgЧасть приведенного выше кода является HTML « начать тег », а >в конце концов , это HTML " конечный тег ».- Все, от начального тега до конечного тега, включительно, составляет этот элемент HTML
img" ».
- HTML
img "теги" / "элементы" используются для вставки изображений в HTML.
- Каждое из назначений внутри элемента настраивает атрибут HTML " » .
- Атрибут «стиль» принимает CSS стиль , так что все в двойных кавычках здесь:
style=""это CSS property:valueключ-значение " декларация ».
- Обратите внимание, что каждое CSS «объявление свойства: значение» разделяется точкой с запятой (
;), тогда как каждый «атрибут» HTML в этом «элементе» разделяется пробелом (
- Чтобы получить изображение в центре нашего HTML и CSS кода выше, ключевые «атрибуты» - это просто
srcиstyle ».
-
alt не является обязательным.
- Внутри HTML
styleатрибут, который принимает CSS стили, ключевые заявления все 4 , которые я показываю: display:block, float:none, margin-left:auto, иmargin-right:auto .
- Если ничего ранее не было установлено
float свойство ранее, тогда вы можете оставить это объявление, но в любом случае полезно иметь его на всякий случай.
- Если вы впервые узнали, как центрировать изображение с использованием HTML и CSS, здесь: https://www.w3schools.com/howto/howto_css_image_center.asp .
- CSS использует комментарии в стиле C (
/* my comment */).
Ссылки:
- Узнайте больше о синтаксисе CSS здесь: https://www.w3schools.com/css/css_syntax.asp
- Прочитайте о "HTML-теги против элементов" здесь .
- Я сделал большую часть своей практики стилей HTML и CSS в моем readme GitHub для разметки здесь: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
- Я узнал почти все, что я знаю о HTML и CSS, нажав на w3schools.com. Вот несколько конкретных страниц:
- %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
- https://www.w3schools.com/css/css_float.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
- https://www.w3schools.com/css/css3_images.asp
- https://www.w3schools.com/tags/default.asp
- HTML и CSS комментарии: https://www.w3schools.com/css/css_comments.asp
- Мой огнестрельный гексакоптер, который я сделал: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
