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% від ширини екранного розміру, але ви можете використовувати класи 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атрибут , однак, наприклад, ширина, як це:
<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 alignкласи CSS встановлюють ширину зображення на 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 ++.
Так і з відміткою. Відмітка - мова високого рівня, що інтерпретується до 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- атрибут .
- Атрибут "style" приймає 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 у своєму читанні 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
