Heim > Web-Frontend > HTML-Tutorial > Markdown+Bootstrap图片自适应属性_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 08:49:35
Original
1204 Leute haben es durchsucht

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

如:”武汉光谷”

用js就好了:

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

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

<metaname="viewport" content="width=device-width, initial-scale=1">
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage