bootstrap设置图片的响应式
bootstrap设置网站中内容的图片,根据屏幕的框都变化而变化,使图片也响应式,自适应起来。
在图片中增加两个类 .img-responsive
.center-block
。通过增加这两个样式会把图片设置成块状元素,并设置图片最大的宽度为100%,高度自动。
html
- <img src="路径" class="img-responsive center-block" />
如果图片在文章中插入的,为了避免每次在编辑文章的时候去增加样式,所有可以通过js的设置自动设定图片的样式。直线电机滑台
js
- $(function(){
- //当所有资源加载完后设置
- $(\'.content img\').addClass(\'img-responsive center-block\');
- });
![](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvMzU2OTUvMjAyMTEyLzM1Njk1LTIwMjExMjIyMTExOTM3MjE3LTEwOTU1Mzk4ODAuanBn.jpg?w=700&webp=1)