Home >Web Front-end >HTML Tutorial >Markdown+Bootstrap图片自适应属性_html/css_WEB-ITnose

Markdown+Bootstrap图片自适应属性_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:49:351200browse

Markdown是一个很好的标记语言,越来越流行作为编辑器的语法,Bootstrap是一个前端框架,那么问题来了,Markdown的图片标记如:![alt](url),在页面上通常会转换成html,这个时候如何给图片加Bootstrap的图片自适应属性.img-responsive?

如:”武汉光谷”

用js就好了:

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

别忘了在html的head标签内加上:

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

这样在手机小屏幕上,图片也能够自动缩放了,同时不影响Bootstrap的自适应布局。.img-responsive属性其实也就是给图片加block,max-width:100%的属性。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn