Combining Markdown and Bootstrap to implement image adaptive attributes_javascript skills

Let me first tell you the basic concepts and advantages of Markdown

Markdown is a markup language that can be written using an ordinary text editor. Through simple markup syntax, it can make ordinary text content have a certain format.

Markdown is a lightweight markup language that has many advantages and is now widely used by more and more writing enthusiasts and writers. Please don’t be confused by the markup and language when you see this. The syntax of Markdown is very simple. There are no more than ten commonly used markup symbols. Compared with the more complex HTML markup language, Markdown is very lightweight and does not require much learning cost. Once you are familiar with this grammatical rule, you will have Once and for all results.

Advantages of using Markdown

Focus on your text content rather than layout style, and write with peace of mind.

Easily export HTML, PDF and native .md files.

Pure text content, compatible with all text editors and word processing software.

Modify your article version at any time without causing confusion like word processing software generating multiple file versions.

Readable, intuitive and low learning cost.

Markdown is a good markup language and is becoming more and more popular as an editor syntax. Bootstrap is a front-end framework , so here comes the problem. Markdown’s image tags are like: , which is usually converted to html on the page. At this time, how to add Bootstrap’s image adaptive attribute .img-responsive to the image?

For example:

<img alt=”武汉光谷” src=”http://cdn.tanteng.me/uploads/2016/05/guang-gu.jpg” class=”img-responsive”>

Just use js:

<scripttype="text/javascript">
$(".content img").addClass('img-responsive');
</script>

Don’t forget to add:

in the head tag of html

<metaname="viewport" content="width=device-width, initial-scale=1">

In this way, the image can be automatically scaled on the small screen of the mobile phone without affecting the adaptive layout of Bootstrap. The .img-responsive attribute is actually an attribute that adds block and max-width: 100% to the image.

The above is the relevant knowledge that the editor introduces to you by combining Markdown and Bootstrap to achieve adaptive attributes of images. I hope it will be helpful to you!