Для добавления изображений в Markdown:
Синтаксис приведен ниже.
Для изменения размера изображения в Markdown:
Для изменения размера изображения в Markdown мы используем HTML-тег « ». Только этот тег помогает изменить размер изображения в Markdown, а синтаксис этого тега «
» приведен ниже.
< изображение источник знак равно 'имя изображения' все знак равно “” ширина знак равно 'ценность' высота знак равно 'ценность' >
Мы можем изменить размер изображения, установив значения ширины и высоты в числах, а также в процентах. Мы также можем использовать атрибут стиля в этом теге « » для изменения размера изображения в Markdown.
Пример #01:
Мы используем код Visual Studio для выполнения кодов Markdown. Для кодов Markdown нам нужно открыть как текстовый редактор, так и окно предварительного просмотра. В текстовом редакторе мы должны добавить ввод, а вывод получается в окне предварительного просмотра. В текстовом редакторе мы сначала добавляем изображение в Markdown, ставя «!» символ, а затем добавляем квадратные скобки, в которых мы добавляем «Альтернативный текст». Теперь мы добавляем путь к изображению.
Мы вводим имя изображения с его расширением, потому что и код, и изображение сохраняются в одном каталоге. Итак, мы просто добавляем сюда имя «cloud.png». Затем мы добавляем текст «Изображение облака», и это текст, который отображается только при наведении курсора мыши. Теперь изображение добавлено, и мы также можем видеть это изображение в окне предварительного просмотра.
Изображение облака показано ниже, так как мы добавили это изображение в код Markdown, который отображается выше.
Пример #02:
Теперь мы изменяем размер этого изображения с помощью тега « ». Сначала мы вводим «src», в который добавляется имя или путь к изображению. После этого ставим «alt» и настраиваем «Облачное изображение». Мы настроили «ширину» изображения на «230». «Высота» настроена на «300». Мы также добавляем «заголовок» в этот тег «
», и значение этого «заголовка» — «Облачный заголовок». Теперь размер изображения изменен. Вы можете увидеть измененный размер изображения в окне предварительного просмотра.
Размер изображения в этом результате изменен, а «ширина» изображения равна «230», а «высота» — «300». Это потому, что мы скорректировали эту ширину и высоту в коде Markdown.
Пример #03:
Мы также можем изменить «ширину» и «высоту» изображения, указав их значения в процентах. После добавления имени или пути к изображению и настройки «alt» на «Облачное изображение» мы установили «ширину» и «высоту» изображения на «50%». Затем добавьте «название» и закройте этот тег.
Вот изображение, размер которого изменяется с помощью тега « ». Высота изображения, как и ширина, составляет «50%».
Пример #04:
Теперь мы используем атрибут «style» в этом теге « » для изменения размера изображения в Markdown. Мы должны добавить имя изображения, а затем атрибут «alt». После этого мы ставим атрибут «стиль» и добавляем в качестве его значений «ширину и высоту». «Ширина», которую мы установили, находится в пикселях, что составляет «500 пикселей», а «высота» — «400 пикселей». Теперь размер изображения изменится соответствующим образом.
Размер изображения в этом результате был обновлен; его «ширина» теперь «500 пикселей», а «высота» — «400 пикселей». Это видно в результате кода Markdown, который приведен выше, где мы настроили ширину и высоту в атрибуте стиля.
Пример #05:
Мы добавляем еще одно изображение. Но в этом коде Markdown мы не меняем размер изображения. Размер изображения изменяется только тогда, когда мы использовали тег « ». Ставим «!» а затем добавьте текст внутри квадратных скобок «Sun Image». После закрытия квадратных скобок мы помещаем круглые скобки, в которые мы вставили имя изображения «New_sun.png», а затем добавляем текст, который будет отображаться при наведении курсора. Исходный размер изображения будет отображаться в результате.
Изображение солнца показано так, как мы добавили это изображение в код Markdown. Кроме того, исходный размер изображения виден, потому что мы не можем настроить размер изображения без использования тега « ».
Пример #06:
Используя тег « », мы изменяем размер этого изображения. Во-первых, мы добавляем имя или путь к изображению, размер которого мы хотим изменить, в поле «src». «Ширина» и «высота» изображения были изменены на «300». Размер изображения изменился. Окно предварительного просмотра показывает новый размер изображения.
Ширина и высота изображения были изменены на «300».
Пример #07:
Установив значения «ширины» и «высоты» изображения в процентах, мы можем легко изменить эти размеры. Мы оба скорректировали «ширину» и «высоту» изображения на «40%», а затем закрыли этот тег.
Вот изображение с 40% высоты и 40% ширины. Мы добавили эту ширину и высоту внутри тега « » после добавления имени изображения.
Пример #08:
Теперь мы используем атрибут «style» в теге « », чтобы изменить размер изображения в Markdown. Мы добавили «ширину и высоту» в качестве значений атрибута «стиль» после добавления имени изображения и атрибута «alt». «Ширина», которую мы указываем, составляет «450 пикселей», а «высота» также регулируется до «450 пикселей». Размер изображения теперь изменится соответствующим образом в соответствии с этими новыми значениями ширины и высоты.
Теперь результат этого кода также отображается в окне предварительного просмотра, которое отображается ниже. И ширина, и высота этого изображения теперь равны «450px» в этом результате ниже.
Вывод:
В этом руководстве мы подробно рассмотрели концепцию добавления изображений, а также рассмотрели, как изменить размер изображения в Markdown. Мы добавили изображения в Markdown и изменили их размер с помощью тега « » и показали, как все это сделать в Markdown. Мы изменили размер изображения, указав значения ширины и высоты в числах, а также в процентах. Мы также использовали атрибут стиля в теге «
» для обновления или изменения размера изображения в Markdown.